'How to disable a button in vue.js with a if statement?

I created a counter with vue.js. I used a method with an if method for disabled a button (if the count > 5 the increment button is disabled). But I don't understand why it disabled all my buttons. If someone can help me, it will be really nice !

There is the code :

     <body> 
      <div id="app">
        <button @click="count++" v-bind:disabled="blockCount">increment</button>
        <button @click="count--">decrement</button>
        <p>The count is {{ count }}</p>
        <p>{{ message }}</p>
        <button v-on:click="reverseMessage">Reverse Message</button>
        <p v-if="count >= 7" blockCountChange()> </p>
 </div>

<script>
 const example1 = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue ! Just a test',
    count:'',
    blockCount: false
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split(' ').reverse().join(' ')
  },
  blockCountChange: {
      function() {
        if (this.count>5) {
          return this.blockCount = true;
      }   
     }
    }
  } 
});  
</script>
  </body>

javascript vue.js

Solution 1:^[1]

Im not sure about all the random asterisks in the code but I'm pretty sure you wanted to use a computed property

export default {
  data() {
    return {
        count: 0,
    }
  },
  computed: {
    blockCount() {
      return this.count > 5
    }
  }
}

Solution 2:^[2]

in Vue everything in the data property is wrapped in a a reactive proxy, this means that anything that uses that property will receive a value changed event when you change the value, this means you don't need to manually update the value of blockCount, you can use a computed property to monitor the value of count and return a precomputed value

this will also coincidently remove the

<p v-if="count >= 7" blockCountChange()> </p>

which is i think the actual source of the issue you are having

this means that your code would look like this

<body>
    <div id="app">
        <button @click="count++" :disabled="blockCount">increment</button>
        <button @click="count--">decrement</button>
        <p>The count is {{ count }}</p>
        <p>{{ message }}</p>
        <button @click="reverseMessage">Reverse Message</button>
    </div>

    <script>
        const example1 = new Vue({
            el: "#app",
            data() {
                return {
                     message: "Hello Vue ! Just a test",
                     count: 0,//this is a number so use a number
                }
            },
            computed:{
                blockCount(){
                    return this.count > 5
                }
            },
            methods: {
                reverseMessage() {
                    this.message = this.message.split(" ").reverse().join(" ");
                },
            },
        });
    </script>
</body>

also note the data property should be a function returning the default value, if you specify an object then every instance of your vue object will be tied to the same memory space so will conflict with each other

Solution 3:^[3]

You can look at this example code

We can use a watcher to count and write actions that we want to make.

new Vue({ 
    el: '#app',
    data: {
        message: 'Hello Vue ! Just a test',
        count: 0,
        question: '',
        incrementDesabled: false,
        decrementDesabled: true        
    },
    watch: {
       // whenever count changes, this function will run
        count(newCount, oldCount) {
           if(newCount == 0){
               this.decrementDesabled = true;
           }
           else if(newCount >= 5){
               this.incrementDesabled = true;
               this.decrementDesabled = false;
           }else if(newCount <= 5){
               this.incrementDesabled = false;
               this.decrementDesabled = false;               
           }
        }
    },
    methods: {
        reverseMessage: function () {
            this.message = this.message.split(' ').reverse().join(' ')
        }
    }
});

<body>
        <div id="app">
            <button @click="count++" v-bind:disabled="incrementDesabled">increment</button>
            <button @click="count--" v-bind:disabled="decrementDesabled">decrement</button>
            <p>The count is {{ count }}</p>
            <p>{{ message }}</p>
            <button v-on:click="reverseMessage">Reverse Message</button>
        </div>
        <script src="index.pack.js"></script>
    </body>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	arthurDent
Solution 2
Solution 3	JOY KUMAR PAL

'How to disable a button in vue.js with a if statement?

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]