Discover the power of local state in Vue.js mixin

I've created a Vue mixin with the following structure:

/* eslint-disable */
const amount = null;
const currency = '';

export default {
    methods: {
        formatPrice(amount, currency) {
            this.amount = amount;
            this.currency = currency;

            const isInt = Number.isInteger(this.amountToPrice);

            return isInt ? this.stripDecimalZeroes : this.localePrice;
        }
    }
}

In adding some local state variables to this file, I ran into an ESLint "no-shadow" error when removing my eslint-disable.

How can I properly incorporate local state within this mixin without passing it around to every function? I believe that if the logic is contained within the mixin, this should not be required.

Furthermore, I'm confused by the no-shadow-error since referencing my local state as this.state seems to work fine.

Answer №1

Another approach would be to set your variable to this within the created () {} hook, like this:

created() {
    this.quantity = null;
    this.unit = '';
}

Answer №2

To solve the issue, I implemented the following steps:

Added a state object:

const state = {
    total: null,
    unit: ''
};

Utilized the state in the function:

export default {
    methods: {
        calculateTotal(amount, unit) {
            state.total = amount;
            state.unit = unit;

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

What is the purpose of making a "deep copy" when adding this HTML content?

My canvas-like element is constantly changing its contents. I am attempting to execute a function on each change that captures the current content and adds it to another element, creating a history of all changes. window.updateHistory = func ...

Merge multiple list groups into one with a single active selection using Bootstrap List group functionality

Currently, I am experimenting with merging Bootstrap's accordion and list group with JS behavior. My goal is to create a set of list groups where only one option can be active at a time within each accordion. <link rel="stylesheet" href="https:/ ...

Switching the mouse cursor when the mousedown event occurs

I'm trying to implement a feature where holding down the mouse will change the cursor to an image, and when releasing the mouse it should revert back to its default. However, the code I have isn't working properly - you have to right click then l ...

Using VueJS to access dynamic component data within a method executed through v-bind

I am currently facing a unique challenge and finding it difficult to come up with a solution. My project involves creating a file manager-like feature in Vue, where I want specific folders or files to display custom thumbnails. For example, showing the Cr ...

Is it better to use two div elements with the same v-if condition or wrap them in

When faced with this scenario, what would you consider to be the optimal approach: <div> <div v-if="condition-1">Show something</div> <div v-if="condition-2">Show something else</div> <div v-if= ...

Steps for setting up type-graphql in your projectNeed help with

Trying to include this in my TypeScript project: import { ID } from "type-graphql"; Encountered an issue when attempting to install type-graphql. Received a 404 error stating that it could not be found in the npm registry. npm install @types/type-graphq ...

Is it possible to duplicate this jQuery/Javascript feature using PHP?

I have the code to fetch tweets in JavaScript, but I need it converted to PHP. Can anyone provide any guidance on how to achieve this? $(document).ready( function() { var url = "http://twitter.com/status/user_timeline/joebloggs.json?count=1 ...

Using ASP.net MVC 4 to Implement Validation with Bootstrap Modal and PartialView

After switching from a simple View with validation to using a bootstrap modal and PartialView in my application, I encountered some issues. The client-side validation no longer works and the server-side validation redirects me to a new page instead of disp ...

"Clicking on the jQuery carousel dots results in always navigating back to the first item

Creating a carousel using basic jquery, utilizing the .css() rule to toggle opacity between slides. The goal is to have each dot trigger the display of its corresponding slide while hiding the others. Currently trying: $('.dot').click(function( ...

Inconsistent performance of AJAX functionality

I've been diving deep into this problem for quite some time now. I have a feeling that someone with the right expertise will be able to pinpoint the issue, but for some reason, it's just not clicking for me. The basic functionality here revolves ...

Is there a way to incorporate symbols such as @ in vue-i18n?

Currently, I'm utilizing vue-i18n to localize my forms. Within one of the form fields for email input, there is a placeholder that showcases an example email address with an "@" symbol included. emailPlaceholder: 'eg: <a href="/cdn-cgi/l/email ...

Real-time updating of audio.currentTime state using Vuex getters

I am attempting to integrate an audio player within a Vuex store so that I can utilize its data for output in a custom audio player within a Vue component. Within the Vuex store, there exists a state property named aplayer which is responsible for playing ...

Using props in the v-bind:src directive with Vue - a comprehensive guide!

I have a Vue application with a Block component that needs to display an image. The Block component is used multiple times in the App component, each time passing a value to determine which image src to choose from an array. When I try to print {{ this.Im ...

Stop modal from closing in the presence of an error

My approach involves using a generic method where, upon adding a food item, a modal window with a form opens for the user to input their details. However, since backend validation for duplicate items can only be retrieved after the API call completes. I w ...

Adjust text size using the "increase toggle"

I'm having trouble adjusting the font size of my text within the <div class="comment more>. Whenever I try to wrap the text in a <p>, the "more toggle" functionality stops working properly. Instead of revealing more text when I click on "m ...

Having trouble with my loop using Jquery's $.get method

Having an issue with Jquery mobile / JavaScript I'm struggling to properly loop through the different values of data in my "get" function, where it should be sending ...cmd=PC&data=06464ff ...cmd=PC&data=16464ff ...cmd=PC&data=26464ff ...

All the routes stored in the Express app's (express-promise-router) directory

Currently in my backend application, I am utilizing express-promise-router to handle my routes effectively. Here is an example code snippet: const express = require( 'express' ); const router = require( 'express-promise-router' )(); let ...

Having trouble getting videos to load on VueJS?

I've been grappling with loading a video from a local folder in my Vue.js 2 and Laravel project, but haven't had any luck so far. The Vue-loader plugin is properly installed and added in my webpack.config.js as per the documentation: I first at ...

Fixing the Vue.js error "uncaught exception: Object" when making a GET request

When making a GET request to a firebase database, I am encountering an issue where the data logged in the console displays as "uncaught exception: Object". . Prior to this, I successfully made a POST HTTP request without any problems. However, I have not ...

Improving form handling with Vuex: Ensuring state is only updated after pressing the submit button

I am currently working on developing a form that pulls data from a Vuex store, allowing users to update the form fields and then submit when they are ready. Most tutorials I have seen use v-model with computed get() and set() to retrieve values from the s ...