如何将 v-for 的值绑定到 v-if

Question

我正在使用 BootstrapVue。对于我的问题：我的模板中有一个 v-for，其中有两个 buttons.

循环遍历我的 v-for 我的 v-if 不会生成唯一的 IDs 并且点击一个按钮后每个按钮都会被触发 （来自 Open me! 到 Close me! 和其他方式).

我怎样才能让每个按钮只触发自己而不影响其他按钮？

我想我必须使用我的 v-for 的 n 但实际上我不知道如何将其绑定到 v-if..

提前致谢！

<template>
  <div>
    <div v-for="n in inputs" :key="n.id">
      <b-button v-if="hide" @click="open()">Open me!</b-button>
      <b-button v-if="!hide" @click="close()">Close me! </b-button>
    </div>

    <div>
      <b-button @click="addInput">Add Input</b-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: null,
      inputs: [{
        id: 0
      }],
      hide: true,
    };
  },

  methods: {
    open() {
      this.hide = false
    },

    close() {
      this.hide = true
    },

    addInput() {
      this.inputs.push({
        id: this.id += 1;
      })
    }
  }
};
</script>

Answer 1

一切看起来都很好。为了处理每个按钮触发器，你可以像这样维护一个对象：

<script>
export default {
  data() {
    return {
      inputs: [{id: 0, visible: false}],
    };
  },

  methods: {
    open(index) {
      this.inputs[index].visible = false
    },

    close(index) {
      this.inputs[index].visible = true
    },
    addInput() {
      this.inputs.push({id: this.inputs.length, visible: false});
    }
  }
};
</script>

你的模板应该是这样的

<template>
  <div>
    <div v-for="(val, index) in inputs" :key="val.id">
      <b-button v-if="val.visible" @click="open(index)">Open me!</b-button>
      <b-button v-if="!val.visible" @click="close(index)">Close me! </b-button>
    </div>
  </div>
</template>

编辑：

您不需要每次创建行时都插入一个id，而是可以使用键作为id。请注意，inputs 是一个对象而不是数组，因此即使您想删除一行，也可以只传递索引并将其删除。

Answer 2

我会创建一个对象数组。使用布尔值作为属性来显示或隐藏单击的项目。

var app = new Vue({
  el: '#app',
  data: {
    buttons: []
  },
  created () {
    this.createButtons()
    this.addPropertyToButtons()
  },
  methods: {
 
  createButtons() {
    // Let's just create buttons with an id
    for (var i = 0; i < 10; i++) {
      this.buttons.push({id: i})
    }
  },
  
  addPropertyToButtons() {
   // This method add a new property to buttons AFTER its generated
   this.buttons.forEach(button => button.show = true)
  },
  
  toggleButton(button) {
   if (button.show) {
    button.show = false
  } else {
    button.show = true
  }
  // We are changing the object after it's been loaded, so we need to update ourselves
  app.$forceUpdate();
  }
  
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<template>
  <div>
    <div v-for="button in buttons" :key="button.id">
      <button v-if="button.show" @click="toggleButton(button)">Open me!</button>
      <button v-if="!button.show" @click="toggleButton(button)">Close me! </button>
    </div>
  </div>
</template>
</div>

Answer 3

如果我猜对了，也许可以使用索引：

new Vue({
  el: '#demo',
  data() {
    return {
      hide: null,
    };
  },

  methods: {
    open(n) {
      this.hide = n
    },

    close() {
      this.hide = null
    }
  }
})

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

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>
<div id="demo">
  <div>
    <div v-for="n in 10" :key="n">
      <b-button v-if="!hide" @click="open(n)">Open me! {{n}}</b-button>
      <b-button v-if="hide === n" @click="close()">Close me! {{n}}</b-button>
    </div>
  </div>
</div>

如何将 v-for 的值绑定到 v-if

how to bind value of v-for to v-if

javascript

vue.js

vuejs2