[Vuejs]-Reactive binding with VueJS

by

0👍

✅

You could use vm.$set (as you can read here) to add the new property:

this.$set( this.favs.medium_title , 'fontWeight' , 'bold' )

In this way it will be reactive and changes will be detected.

👤Fab

0👍

You need to add fontWeight to your data object and give it a default value so fontWeight exists on mounted.

👤Paul Bremer

0👍

Because the property fontWeight ain’t declared it is not reactive.Hence you will need to declare it in the declaration of object.

In this the class is binding properly on change of value in the property on button click.

<div id="app">
  <p :class="{active: favs.medium_title.fontWeight === 'bold'}">{{ message }}</p>
  <button @click="favs.medium_title.fontWeight = 'bold'">
  Click here
  </button>
</div>

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    favs: {
    medium_title: {
        fontWeight:''
    },
        }

  }
})

Refer the below fiddle for the solution.
https://jsfiddle.net/xgh63uLo/

If u don’t want to declare the property in advance you may use Vue.$set to set the new property with making it reactive
Check below link
https://v2.vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

👤Riddhi

Leave a comment