Reactivity in Vue.js powered by ES6 classes

Question

Reactivity in Vue.js powered by ES6 classes

I am attempting to create a computed property in Vue.js that is associated with an ES6 class. Here is an example of my Vue instance setup:

...
props: ['customClass'],
computed: {
    localClass: {
         get() {
             return this.customClass
         },
         set (value) {
             console.log("changed")
         }
     }
 }
 ...

This is the structure of my class:

class CustomClass {
    constructor () {
        this.selected = false
    }
}

When I try to modify the selected property like this:

this.localClass.selected = true

The setter function is not being triggered, and it seems like the reactivity has been lost. This behavior is confusing to me.

I have also attempted:

Vue.set(this.localClass, 'selected', true)

Although I pass customClass as a prop, even creating a new instance directly in the component does not change the outcome.

I searched through the Vue.js documentation but did not find any specific section addressing reactivity issues with ES6 classes. Can anyone offer insight on why this might be happening and how to ensure my class remains reactive?

Thank you in advance

javascript vue.js ecmascript-6 es6-class vue-reactivity

Answer 1

Answer №1

When you set a computed property like myComputedProperty, it gets triggered every time you assign a value to that property (e.g.

this.myComputedProperty = {something: 'else'}

.

If you're looking for something different, you might need a watcher with deep: true. Here's an example:

watch: {
  localClass: {
    deep: true,
    handler() {
      out.innerHTML += "watched!";
    }
  }
},

Check out the demo below.

class CustomClass {
  constructor() {
    this.selected = false
  }
}
Vue.component('custom', {
  template: '#custom',
  props: ['customClass'],
  computed: {
    localClass: {
      get() {
        return this.customClass
      },
      set(value) {
        out.innerHTML += "changed!\n";
      }
    }
  },
  watch: {
    localClass: {
      deep: true,
      handler() {
        out.innerHTML += "watched!\n";
      }
    }
  },
  methods: {
    assignToSelected() {
      this.localClass.selected = true
    },
    assignToLocalClass() {
      this.localClass = {
        selected: true
      }
    }
  }
});
new Vue({
  el: '#app',
  data: {
    test: new CustomClass()
  },
})

#out { background: black; color: gray; }
span { font-size: x-small; font-family: verdana }

<script src="https://unpkg.com/vue"></script>

<template id="custom">
  <div>
    {{ localClass }}
    <br>
    <button @click="assignToSelected">assignToSelected</button>
    <span>Note: will trigger "watched!" just once, because, since the value is hardcoded in the method (see code) subsequent clicks won't modify the value.</span>
    <br><br>
    <button @click="assignToLocalClass">assignToLocalClass</button>
    <span>Note: assignToLocalClass() will trigger the computed setter, but wont trigger the watcher because the computed setter currently sets nothing, so nothing changed for the watcher to trigger.</span>
  </div>
</template>

<div id="app">
  <custom :custom-class="test"></custom>
</div>

<pre id="out"></pre>

Answer 2

When you set a computed property like myComputedProperty, it gets triggered every time you assign a value to that property (e.g.

this.myComputedProperty = {something: 'else'}

.

If you're looking for something different, you might need a watcher with deep: true. Here's an example:

watch: {
  localClass: {
    deep: true,
    handler() {
      out.innerHTML += "watched!";
    }
  }
},

Check out the demo below.

class CustomClass {
  constructor() {
    this.selected = false
  }
}
Vue.component('custom', {
  template: '#custom',
  props: ['customClass'],
  computed: {
    localClass: {
      get() {
        return this.customClass
      },
      set(value) {
        out.innerHTML += "changed!\n";
      }
    }
  },
  watch: {
    localClass: {
      deep: true,
      handler() {
        out.innerHTML += "watched!\n";
      }
    }
  },
  methods: {
    assignToSelected() {
      this.localClass.selected = true
    },
    assignToLocalClass() {
      this.localClass = {
        selected: true
      }
    }
  }
});
new Vue({
  el: '#app',
  data: {
    test: new CustomClass()
  },
})

#out { background: black; color: gray; }
span { font-size: x-small; font-family: verdana }

<script src="https://unpkg.com/vue"></script>

<template id="custom">
  <div>
    {{ localClass }}
    <br>
    <button @click="assignToSelected">assignToSelected</button>
    <span>Note: will trigger "watched!" just once, because, since the value is hardcoded in the method (see code) subsequent clicks won't modify the value.</span>
    <br><br>
    <button @click="assignToLocalClass">assignToLocalClass</button>
    <span>Note: assignToLocalClass() will trigger the computed setter, but wont trigger the watcher because the computed setter currently sets nothing, so nothing changed for the watcher to trigger.</span>
  </div>
</template>

<div id="app">
  <custom :custom-class="test"></custom>
</div>

<pre id="out"></pre>

Reactivity in Vue.js powered by ES6 classes

Answer №1

Similar questions

What should I do when using _.extend() in express - override or add in fields?

Error loading custom Javascript in MVC 4 view during the first page load

Alternating row colors using CSS zebra striping after parsing XML with jQuery

Mapbox struggling with performance because of an abundance of markers

CORS problem in Chrome when using AngularJS and Symfony 3

Step-by-step guide on incorporating Google Fonts and Material Icons into Vue 3 custom web components

The deletion request using the form in Express is experiencing issues and not functioning properly

Add the item to a fresh array using the Ajax function

Is it necessary to use Hapi.js on the client side in order to establish a websocket connection using the Hapi.js protocol?

Can you explain the function of a digest attribute?

Check if the value is a string and contains a floating point number; if so, parse and format the float

What's stopping me from installing the npm stripe checkout package?

What is the best way to allow my limit to be as greedy as possible?

Attempting to achieve a carousel animation using jQuery

Rewriting URLs in Angular 2

Concerns arise with jQuery grid compatibility in Firefox browsers

Tips for implementing validation on dynamically inserted fields in a form

Issue with template updating when utilizing ui-router and ion-tabs in Ionic framework

Is there a way to use HTML and CSS to switch the style of a dynamic decimal number to either Roman numerals or Katakana characters within a specified HTML element, such as a tag, div

Exploring the significance of a super in Object-Oriented Programming within JavaScript