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

Unable to make calls to functions within my JQuery prototype class

Troubleshooting Next.js server actions with ESLint error detection

Getting console data in AngularJS can be achieved by using the console.log()

What is the best way to define these variables at a global scope within my controller?

Error: The specified function in the schema is not valid for the current operation mode

What could be the reason for the jQuery not displaying JSON data in the console log?

Loading Angular.js scripts into the webpage

What is the best way in Angular to focus on an input field using its name, model, or id?

Looking to display database information using javascript

Calculating a Price Quote

Learn the process of updating a nested document within an array in MongoDB

When displaying a collection of components, clicking a button will always select the most recent element in the array

Query MySQL and automatically populate form fields with the data retrieved after the user triggers an "onexit" or "onsubmit" event, all without having to reload the page,

Having trouble getting gulp set up and running with npm?

Discovering the absent number within a cyclical array

Leveraging Vue js components while utilizing it from a content delivery network (CDN

Using Firebase Authentication in Next.js with Server-Side Components

What crucial element is absent from my array.map function?

Exploring the directories: bundles, lib, lib-esm, and iife

Organizing pictures by category