Combining multiple v-if conditions on a single Vuejs element

Question

Combining multiple v-if conditions on a single Vuejs element

Hey there, I'm currently facing an issue with v-if in Vue.

Basically, I have a v-for loop that iterates through an array and within that loop, I have a few elements with v-if conditions:

<button v-if="Collection.status" type="button">deactivate</button>
<button v-else type="button">activate</button>

However, I would like to also disable the "activate" buttons if a specific data variable (disableButton) is set to true. Any ideas on how I could achieve this?

It might seem like a simple question, but as someone new to Vue, I've been searching for a solution for quite some time now.

javascript vue.js vuejs2

Answer 1

Answer №1

Here is a code snippet you can try:

const app = new Vue({
  el: '#demo',
  data() {
    return {
      items: [{id: 1, status: true}, {id: 2, status: false}, {id: 3, status: true}],
      disableButton: true
    }
  }
})

Vue.config.productionTip = false
Vue.config.devtools = false

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <ul>
    <li v-for="item in items" :key="item.id">
        <button v-if="item.status" type="button" >deactivate</button>
        <button v-else :disabled="disableButton" type="button">activate</button>
  	</li>
  </ul>
</div>

Answer 2

Here is a code snippet you can try:

const app = new Vue({
  el: '#demo',
  data() {
    return {
      items: [{id: 1, status: true}, {id: 2, status: false}, {id: 3, status: true}],
      disableButton: true
    }
  }
})

Vue.config.productionTip = false
Vue.config.devtools = false

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <ul>
    <li v-for="item in items" :key="item.id">
        <button v-if="item.status" type="button" >deactivate</button>
        <button v-else :disabled="disableButton" type="button">activate</button>
  	</li>
  </ul>
</div>

Answer 3

Answer №2

Are you searching for this?

<button v-else type="button" disable="Collection.disableButton">activate</button>

Answer 4

Are you searching for this?

<button v-else type="button" disable="Collection.disableButton">activate</button>

Combining multiple v-if conditions on a single Vuejs element

Answer №1

Answer №2

Similar questions

What is the total number of webgl.draw calls generated by Three.js when rendering a specific quantity of geometries, materials, and meshes?

Error in Nuxt with Octoin-vue: identifier not recognized

What's the best way to show floating point numbers in a concise format while also maintaining the ability to perform calculations within this Vue app?

Is it possible to automate the process of data being sent to a website? (Using Python with Flask, WSGI, and

Tips for hiding a bootstrap tooltip when an element is no longer in the DOM

What is the best way to utilize global variables in React JS?

What's the best way to include php variables in this Javascript code?

Issues with triggering functions through an input with Vue.js on a Samsung S9 are preventing the intended function from

How can I write an if-else statement in JavaScript with Mongoose for MongoDB?

How can I conditionally disable a button in Vue.js using an if statement?

I am selecting specific items from a list to display only 4 on my webpage

Create a personalized attribute for division automation

Remove hidden data upon moving cursor over table rows after a delay

Iterate through the list elements by utilizing jQuery

Input various information into a single form multiple times and automatically submit it to a Google spreadsheet

Utilizing JSON data to create dynamic HTML content for Isotope.js filtering

What is the best way to organize React components that need to retrieve data from a modal?

Emulating a button press on the login screen

What is the proper procedure for configuring Babel and executing "npm run dev" in the terminal without encountering the "ERROR in ./src/js/index.js" message?

Utilizing IonicSafeString for Alert Box Messages in Event Handling