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

Question

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

4

我正在使用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>

- patrick96

我建议将隐藏项按索引保存到数组中。 - sandrooco

1

你不应该循环纯数字，而是应该循环包含布尔值或对象列表的数组，以反映按钮的状态。 - t.niese

仅供参考。在我的实际代码中，我正在循环遍历来自JSON的v-for，并且我有唯一的ID，因此v-for="(array, index) in json"，对于这个array，我正在生成唯一的ID！但是，在循环结束后，我的v-if将为每个按钮触发。 - patrick96

2个回答

0

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

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>

- Wimanicesir

嗨，感谢您的帮助。我认为我低估了我的输入输出。我已经更新了我的问题。实际上，我并没有循环遍历一个number，而是在手动生成的具有唯一id的输入上进行循环遍历。对于这个误解，我感到抱歉！ - patrick96

你能否在生成的输入中添加一个名为“show”的属性？也许可以在生成过程中实现？不管怎样，原则是相同的 :) 编辑：我看了你的编辑，这绝对是可能的！;) - Wimanicesir

我已经尝试过这个了，但实际上我所做的一切都是错误和错误。 - patrick96

嗯，我会用你更新后的代码进行编辑 :) - Wimanicesir

嘿，Patrick，我做了一个简单的更改并添加了一些注释。如果你仍然有错误，请也把它发布出来 :) - Wimanicesir

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Amaarockz · Accepted Answer

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

<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，而是可以使用key作为id。请注意，inputs是一个对象而不是数组，因此即使要删除一行，您也只需要传递索引即可将其移除。