v-for 값을 v-if에 바인딩하는 방법

v-for 값을 v-if에 바인딩하는 방법

BootstrapVue에서 일하고 있습니다.문제 해결 방법:나는 가지고 있다v-for두 개 있는 템플릿에서buttons.

루핑 오버v-for나의v-if고유하지 않다IDs버튼을 한 번 클릭하면 각 버튼이 트리거됩니다(에서 다른 방향으로).

어떻게 하면 각 버튼은 자기 자신만 트리거하고 다른 버튼에는 영향을 주지 않을 수 있을까요?

내 생각엔 내 옷을 입어야 할 것 같아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>

모든 게 괜찮아 보여요.각 버튼 트리거를 처리하기 위해 다음과 같은 개체를 유지할 수 있습니다.

<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는 배열이 아닌 객체이므로 행을 삭제하더라도 인덱스를 통과시켜 삭제할 수 있습니다.

내 말이 맞다면 인덱스를 사용할 수 있습니다.

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>

저는 사물들을 배열할 것입니다.부울을 속성으로 사용하여 클릭한 항목을 표시하거나 숨깁니다.

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>

언급URL : https://stackoverflow.com/questions/69807074/how-to-bind-value-of-v-for-to-v-if