CODEWITHSUNDEEP
javascriptvue.js
MorganeaM
MorganeaM

Reputation: 3

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>

Upvotes: 0

Views: 3746

Answers (4)

JOY KUMAR PAL
JOY KUMAR PAL

Reputation: 146

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>

Upvotes: 0

MikeT
MikeT

Reputation: 5500

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

Upvotes: 1

Roh&#236;t J&#237;ndal
Roh&#236;t J&#237;ndal

Reputation: 27192

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>

Upvotes: 0

cgn.dev
cgn.dev

Reputation: 1004

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

Upvotes: 1

Related Questions