How to incorporate Mixin in your Nuxt template

I'm having trouble utilizing the mixin function in my template. Although Vue documentation states that mixins and components are merged, I am unable to call the function.

getImage is not a function

Mixin

export default {
  data() {
    return {
      l: 2,
      output: 'webp'
    }
  },
  methods: {
    getImage() {
      return 'www.example.url'
    }
  }
}

Component

<template>
  <v-img :src="getImage()" />
</template>

<script>
import imageMixin from '~/mixins/image'

export default {
  name: 'New',
  mixin: { imageMixin }
}
</script>

<style scoped></style>

Answer №1

Replace mixin: { imageMixin } with mixins: [imageMixin]

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Sort out the table using Javascript and then choose all the checkboxes

I'm struggling with a function in Javascript that will only check checkboxes on visible rows of an HTML table. The table has a checkbox on each row and is filtered based on a textbox above the table. The checkboxes in the table are named chkbuild, an ...

Is the Jest function, containing an asynchronous call to User.findAll [using Sequelize with PostgreSQL], failing its test?

Why is my test failing for the getAllUsers function? I suspect that the assertions are executed before all async calls to User.findAll complete. Any suggestions on how to fix this? Here is the code being tested: const { Op } = require('sequelize&apo ...

Retrieve JSON Object using a string identifier

I created a script that takes the ID of a link as the name of a JSON dataset. $('.link').click(function() { var dataset = $(this).attr("id"); for (var i = 0; i < chart.series.length; i++) { chart.series[i].setData(lata.dataset ...

The Element Datepicker incorrectly displays "yesterday" as an active option instead of disabled when the timezone is set to +14

After adjusting my timezone to +14 using a chrome plugin, I noticed that the calendar app is displaying incorrect disabled dates. You can view the issue here. This is the formula I'm currently utilizing to disable dates: disabledDate(time) { re ...

Is there a way to verify if a Backbone.View is actively displayed in the DOM?

Is there a way to determine if a Backbone.View is currently rendered in the DOM, so that I do not need to rerender it? Any suggestions on how this can be achieved? Thanks and regards ...

Is there a way to check if a file name input is valid using regular expressions?

I'm having trouble getting my code below to work properly. I'm not sure if the problem lies in the match function syntax or the regex itself. Any assistance would be greatly appreciated. $scope.fileSelected = function (file) { var valid = "/ ...

Passing Props in Vue-Router: A Guide

I've encountered an issue with passing props using Vue-Router. I'm struggling to access the props in the next view after routing. Here is my methods object: methods: { submitForm() { let self = this; axios({ method: &apo ...

Activate a jQuery plugin on elements that are dynamically generated

Here is the code snippet I am using: $(".address-geocomplete").geocomplete({ country: "US", details: ".details", detailsAttribute: "data-geo" }); When these elements are loaded with the document, everything works smoothly. However, there seem ...

What is the best way to add an array to my JSON object in Javascript?

I'm currently in the process of formatting an array into a JSON object for API submission. Struggling to find the right method to transform my array into the desired structure. This is what my array looks like: data: [ ["Lisa", "Heinz", "1993-04 ...

Updating the state after receiving API results asynchronously following a function call

I am attempting to update the state asynchronously when my fetchWeather function is executed from my WeatherProvider component, which calls an axios request to a weather API. The result of this request should be mapped to a forecast variable within the fet ...

Modifying information in a single array in Vue JS has a ripple effect on

I'm really struggling to understand what the ... want with this Vue component! Can someone please help me out? Here is my code: var groupadding = new Vue({ el: '#groupAdd', data:{ currentFullData: [], localData: [] }, method ...

The submit button fails to produce any result

I have a submit button in a contact form that triggers PHP code to send an email. However, when I press the button nothing happens - not even the PHP code is displayed as it should be if PHP were not installed. Interestingly, I have tested other simple mai ...

Where is the best place for the heavy lifting in Redux - reducer, action, container, or presentation component?

I've been exploring the concept of container/presentational component separation as explained in this article. However, I find myself a bit confused about where certain parts of my code should be placed. Consider a simple list of items. When an item ...

Interact with a webpage element using Selenium

My goal is to extract information from the following page: I want to interact with each blue stats icon on the page (one for every match of the tournament). Below is the code I am using: from selenium import webdriver from selenium.webdriver.common.by im ...

Step-by-step guide on implementing virtual scroll feature with ngFor Directive in Ionic 2

I am working on a project where I need to repeat a card multiple times using ngFor. Since the number of cards will vary each time the page loads, I want to use virtual scrolling to handle any potential overflow. However, I have been struggling to get it ...

What are the different ways in which :style is utilized in re-frame - with brackets, curly brackets, or simply without any characters?

For my current project, I am utilizing Clojure, ClojureScript, lein, shadow-cljs, Emacs, and CIDER to develop a dynamic web application. Typically, when building the project, I initiate the command cider-jack-in-cljs in Emacs, select shadow-cljs, opt for ...

Is there a way to identify which paragraph element was clicked and retrieve its innerHTML content using JavaScript?

Hi there! I'm facing an issue where I need my webpage to identify which paragraph was clicked, retrieve its inner text, and then adjust the size of an image accordingly. You can check it out here: http://jsfiddle.net/YgL5Z/ Here is a snippet of my HT ...

What is the method of showing a leaflet map in a particular div tag?

I want to showcase a leaflet map, but I specifically need it to be displayed in a div tag with a particular id like document.getElementById("map"). Here is the code snippet below which utilizes Vue.js: Here is the div tag where the map will be rendered: ...

Is it possible to extract an attribute value from a parent element using ReactJS?

https://i.stack.imgur.com/OXBB7.png Whenever I select a particular button, my goal is to capture the {country} prop that is linked to it. I attempted the following approach import React, { useState, useEffect } from 'react' import axios from &ap ...

Switching the npm SQL pool from Postgres to MySQL

Here is the code snippet I am currently working with: console.log("-------------- Establishing connection to the database..."); const client = await pool.connect(); console.log("-------------- Connection successfully established."); consol ...