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

Question

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>

Sorry to say but your code is a real mess. However aside from that, the problem you describe is not visible in your code. Are you sure that this is the code you run? — Wimanicesir
– Wimanicesir, Commented Feb 16, 2022 at 13:54
Please see How to Ask, then revise your post title to ask a clear, specific question. — isherwood
– isherwood, Commented Feb 16, 2022 at 14:18
It appears that you've attempted to boldface various lines of code. Obviously that doesn't work in preformatted HTML. Please remove it. — isherwood
– isherwood, Commented Feb 16, 2022 at 14:19
Hello, thanks for your feedback. I'm trying to make my code more clear by removing some superfluous thing. I think the problem is about the blockCountChange function but I don't understand why . — MorganeaM
– MorganeaM, Commented Feb 16, 2022 at 14:25
i think your issue is <p v-if="count >= 7" blockCountChange()> </p> this doesn't look like valid html and when browsers hit invalid html they tend to take their best guess at what you meant to do this leads to all sorts of weird behaviour, as other answers suggest use a computed property with the reactivity of the data element to update the value — MikeT
– MikeT, Commented Feb 16, 2022 at 14:34

cgn.dev · Accepted Answer · 2022-02-16 14:21:08Z

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

answered Feb 16, 2022 at 14:21

cgn.dev

1,03410 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

MikeT Over a year ago

while that is a definite improvement to over the current code, it doesn't explain the behaviour they are seeing

MikeT · Accepted Answer · 2022-02-16 14:59:48Z

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

Rohìt Jíndal · Accepted Answer · 2022-02-16 14:28:46Z

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>

JOY KUMAR PAL · Accepted Answer · 2022-02-18 05:07:28Z

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>

Collectives™ on Stack Overflow

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

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related