如何將v-for的值系結到v-if

我正在與BootstrapVue. 對于我的問題：v-for我的模板中有一個，其中有兩個buttons.

回圈我的v-formyv-if不會生成唯一的IDs，然后單擊一個按鈕后，每個按鈕都會被觸發（從Open me!toClose me!和其他方式）。

我怎樣才能設法讓每個按鈕只觸發自己而不影響另一個？

我想我必須使用我n的v-for但我實際上不知道如何將它系結到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>

uj5u.com熱心網友回復：

一切似乎都很好。為了處理每個按鈕觸發器，您可以像這樣維護一個物件：

<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是一個物件而不是陣列，因此即使您想洗掉一行，您也可以傳遞索引并將其洗掉。

uj5u.com熱心網友回復：

如果我猜對了，也許可以使用索引：

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>

uj5u.com熱心網友回復：

我會創建一個物件陣列。使用布林值作為屬性來顯示或隱藏點擊的專案。

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>

標籤：javascript Vue.js Vuejs2

上一篇：使用axios和vujes獲取請求

下一篇：DELPHI中來自URL的JSON陣列