Troubleshooting Vue JS 2: Issues with Computed Props

Question

Troubleshooting Vue JS 2: Issues with Computed Props

I've been diving into Vue.js by following a YouTube channel, but the video was uploaded last year and I think it might not be working properly due to changes in VueJS itself. It would be really helpful if anyone could assist me with this.

Here is the codeio link: http://codepen.io/myrgato/pen/BWWxdQ

HTML

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b7c1c2d2f78599859985">[email protected]</a>"></script>
<div id="app">
  <button @click="increment">Increment</button>
  <p>Counter: {{counter}}</p>
  <p>Clicks: {{clicks}}</p>
</div>

JS

new Vue({
  el: '#app',
  data: {
    counter: 0,
    clicks: 0
  },
  methods: {
    increment(){
      this.clicks++;
    }
  },
  computed: {
    counter(){
      return this.clicks * 2; 
    }
  }
});

It's designed to calculate the number of clicks and then use a computed property to display a counter that is equal to clicks multiplied by two. However, for some reason, it's not functioning as expected.

javascript vue.js computed-properties

Answer 1

Answer №1

A concise yet comprehensive answer:

It is important to avoid using the same name for both your 'data' variable and 'computed' in Vue.js.

Consider data and computed as belonging to the same category, therefore their names should not overlap.

Answer 2

A concise yet comprehensive answer:

It is important to avoid using the same name for both your 'data' variable and 'computed' in Vue.js.

Consider data and computed as belonging to the same category, therefore their names should not overlap.

Answer 3

Answer №2

Here is a effective solution. The key is to:

utilize a distinct name for the calculated property (in this case counter2)
and employ a lambda function with just one parameter (here x) instead of using this.

new Vue({
  el: '#app',
  data: {
    counter: 0,
    clicks: 0
  },
  methods: {
    increment() {
      this.clicks++;
    }
  },
  computed: {
    counter2: x => x.clicks * 2
  }
});

<script src="https://unpkg.com/@[email protected]"></script>
<div id="app">
  <button @click="increment">Increment</button>
  <p>Counter: {{counter2}}</p>
  <p>Clicks: {{clicks}}</p>
</div>

Answer 4

Here is a effective solution. The key is to:

utilize a distinct name for the calculated property (in this case counter2)
and employ a lambda function with just one parameter (here x) instead of using this.

new Vue({
  el: '#app',
  data: {
    counter: 0,
    clicks: 0
  },
  methods: {
    increment() {
      this.clicks++;
    }
  },
  computed: {
    counter2: x => x.clicks * 2
  }
});

<script src="https://unpkg.com/@[email protected]"></script>
<div id="app">
  <button @click="increment">Increment</button>
  <p>Counter: {{counter2}}</p>
  <p>Clicks: {{clicks}}</p>
</div>

Answer 5

Answer №3

In order to investigate the reason behind a certain occurrence, I conducted two tests on jsFiddle:

sample A:

sample B

Upon examination, it was evident that in sample B, the sequence of execution is as follows:

Data properties are added first.
The created hook is executed.
The computed property calculates the value of the counter.

In contrast, in sample A, step 3 does not occur.

A warning you may encounter in vue2.1.0 is :

Vue warn: existing instance property "haveTrigger" will be overwritten by a computed property with the same name.

Further research in the documentation revealed that this warning is no longer present in vue 2.2.2 due to improvement in handling props and computed properties:

Props and computed properties are now defined on a component's prototype instead of as self properties on each instance. This avoids many calls to Object.defineProperty and improves component initialization performance. This will only affect you if you rely on hasOwnProperty checks on props and computed properties, which should be extremely rare, but we are documenting it here to be explicit about the change.

Source

var fancyConstructor = function () {
  this.value = 5
}

var instance = new fancyConstructor()

fancyConstructor.prototype.value = 5000
fancyConstructor.prototype.someOtherValue = 5000

console.log(instance.value)
console.log(instance.someOtherValue)

Exploring individual components further reveals the presence of computed properties assigned to counter.

https://i.sstatic.net/4Ob65.png

The provided code snippet demonstrates what occurs when a property by the same name exists on both the object and the prototype.

Answer 6

In order to investigate the reason behind a certain occurrence, I conducted two tests on jsFiddle:

sample A:

sample B

Upon examination, it was evident that in sample B, the sequence of execution is as follows:

Data properties are added first.
The created hook is executed.
The computed property calculates the value of the counter.

In contrast, in sample A, step 3 does not occur.

A warning you may encounter in vue2.1.0 is :

Vue warn: existing instance property "haveTrigger" will be overwritten by a computed property with the same name.

Further research in the documentation revealed that this warning is no longer present in vue 2.2.2 due to improvement in handling props and computed properties:

Props and computed properties are now defined on a component's prototype instead of as self properties on each instance. This avoids many calls to Object.defineProperty and improves component initialization performance. This will only affect you if you rely on hasOwnProperty checks on props and computed properties, which should be extremely rare, but we are documenting it here to be explicit about the change.

Source

var fancyConstructor = function () {
  this.value = 5
}

var instance = new fancyConstructor()

fancyConstructor.prototype.value = 5000
fancyConstructor.prototype.someOtherValue = 5000

console.log(instance.value)
console.log(instance.someOtherValue)

Exploring individual components further reveals the presence of computed properties assigned to counter.

https://i.sstatic.net/4Ob65.png

The provided code snippet demonstrates what occurs when a property by the same name exists on both the object and the prototype.

Troubleshooting Vue JS 2: Issues with Computed Props

Answer №1

Answer №2

Answer №3

Similar questions

Tips for parsing a multidimensional associative array transferred from PHP to AJAX using jQuery

Validation of Dates

Eliminate any unnecessary line breaks within the text box

Manipulating CSS rules using JavaScript/jQuery

Utilize Mapbox-GL.JS to animate several points along designated routes

How to retrieve a value from an Angular form control in an HTML file

Having trouble with Vue Router at the root path ("/") while utilizing Quasar Server-Side Rendering (SSR)?

The Angular directive alters the scope, however, the template continues to display the unchanged value

The scrolling event on the div is not triggering

Storing translations in localStorage on my website to avoid repeatedly loading them each time I revisit the page

Triggering the jQuery `one()` event from multiple locations for the same element

Having issues with ASP.NET MVC AJAX PartialView not loading Telerik UI components

Is there a method in Express to verify which URL a post is being sent to?

Encountering a 'require is not defined' issue while trying to implement chartjs within a JavaScript script

Tips for attaching inline styles to the body element with a vuejs component

Unable to display Three.JS OBJ Model

The fetch API is being restricted, however, AJAX and XHR are still operational

The Angular application is experiencing issues following an update from version 11 to version 12

Guide on how to call a function in ascx code-behind using JavaScript within the framework of DotNetN

Numerous column pictures that occupy the entire browser screen