[Vuejs]-Binding inline style opacity value with a watcher property

by

2👍

If opacity is a number, you have to use it like:

<div class="container" v-bind:style="{opacity: opacity}">test content</div>

In {opacity: opacity} the first is the CSS property name and the second is the data vue property name.

Note: Your usage of the watcher:

watch:{
opacity: function(oldMessage, newMessage) {
            console.log(this.opacity);
            return {
                '"style"':this.opacity
            }
        },
},...

Makes little sense. Watchers don’t return values. You returning that object has no use at all. Perhaps what you wanted was a computed property:

new Vue({
  el: '#app',
  data: {
    opacity: 0.5
  },
  computed: {
    containerStyle() {
      return {opacity: this.opacity}
    }
  }
})
<script src="https://unpkg.com/vue"></script>

<div id="app">
  <input type="range" min="0" max="1" value="0.5" step="0.01" v-model="opacity"> {{ opacity }}
  <div class="container" v-bind:style="containerStyle">TEST CONTENT</div>
</div>
👤acdcjunior

Leave a comment