CODEWITHSUNDEEP
javascriptcssvue.js
URL87
URL87

Reputation: 11012

Bind class occurs once

How could I make with vuejs a dynamic class that updated just once , something like - 

<div v-bind:class:once="{'class1': class1}">

I think such thing would give me a better performance , am I right ?

I tried the follow code in the fiddle but it doesn't work (should be with red background)

https://jsfiddle.net/5vdczjgt/941/

How could I a such once binding for the class ?

I need it in Vue 1.x version

Upvotes: 0

Views: 350

Answers (1)

Trevor V
Trevor V

Reputation: 2131

You can use a watch and a computed method. What I did is watch for a change for the checkbox and once there is a change set the data value changedOnce to true. If the checkbox changes again under the computed class1 method it will ignore the change

Template:

 <div id="app">
      <label for="r1">Change colors</label><input type="checkbox" v-model="checkbox" id="r1">
      <br><br>
      <div v-bind:class="{'class1': class1}">
        directiva v-bind:class
      </div>
    </div>

Vue JS:

    new Vue({
    el: '#app',
    data: {
        checkbox: false,
        changedOnce: false
    },
    watch: {
        class1: function() {
            this.changedOnce = true
        },
    },
    computed: {
        class1: function() {
            if (this.changedOnce) {
                return true
            } else {
                if (this.checkbox) {
                    return true
                }
                return false
            }
        }
    }
});

New JFiddle Example https://jsfiddle.net/5zpksgq9/

Upvotes: 1

Related Questions