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

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>

CodePudding user response：

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
    }
  }
}

CodePudding user response：

Try to use computed property to get the runtime value of blockCount.

Working Demo :

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue ! Just a test',
    count: '',
    blockCount: false
  },
  computed: {
    getblockCount() {
        this.blockCount = this.count > 5
      return this.blockCount;
    }
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split(' ').reverse().join(' ')
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
        <button @click="count  " :disabled="getblockCount">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> <span v-if="count >= 5">You click on the counter enough ! STOP IT !</span></p>
 </div>

CodePudding user response：

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