单击具有唯一 ID 后如何切换 <b-button> 文本

Question

我正在与 BootstrapVue 合作。我的模板中有一个 b-button，我想在点击它后切换它的文本。

我正在将我生成的唯一 item.id 传递到我的脚本，但如果每个 b-button text 都将被更改，而不仅仅是我单击的那个，这将无法正常工作。这里有什么问题？

您应该能够复制、粘贴代码，它应该会成功。

请注意，这只是我的代码的复制品，在需要的代码上进行了缩减，因此代码不应更改这么多。

我的模板：

<div v-for="item in inputs" :key="item.id">
  <b-button @click="changeText(item)">{{btnText}}</b-button>
</div>

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

我的脚本：

data() {
  return {
    collapsed: [true],
    id: null,
    inputs: [{id: 0}],
    btnText: "It's false",
  }
},

methods: {
  changeText(item) {
    this.collapsed[item.id] = !this.collapsed[item.id]

    if(this.collapsed[item.id] === true) {
      this.btnText = "It's true"
    }
    else if(this.collapsed[item.id] === false) {
      this.btnText = "It's false"
    }
  },

  addInput() {
    this.inputs.push({
      id: this.id += 1, 
    })
    this.collapsed.push(true);

  }
}

Answer 1

您可以为 btnText 维护一个对象，例如

data() {
  return {
    collapsed: [false],
    id: null,
    inputs: [{id: 0}],
    btnText: {0: "It's false"} //Change added
  }
},

methods: {
  changeText(item) {
    this.collapsed[item.id] = !this.collapsed[item.id]

    if(this.collapsed[item.id] === true) {
      this.btnText[item.id] = "It's true"; //Change added
    }
    else if(this.collapsed[item.id] === false) {
      this.btnText[item.id] = "It's false"; //Change added
    }
  },

  addInput() {
    this.inputs.push({
      id: this.inputs.length, // Change added
    })
    this.btnText[this.inputs.length] = 'It's false';  //Change added
    this.collapsed.push(true);

  }
}

你的模板应该是这样的

<div v-for="item in inputs" :key="item.id">
  <b-button @click="changeText(item)">{{btnText[item.id]}}</b-button> <!-- Change added -->
</div>

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

Answer 2

不是用单独的数组来存储不同的字段，而是将它们移动到 inputs[] 对象数组中，这样 v-for 中的每个 item 都有自己的拥有 id、collapsed 和 btnText.
然后更新 changeText() 以引用 item 参数中的字段。
同时更新模板以使用 item.btnText 字段。

<script>
export default {
  data() {
    return {
      inputs: [{ id: 0, collapsed: true, btnText: `It's true` }], 1️⃣
    }
  },
  methods: {
    changeText(item) {
      item.collapsed = !item.collapsed 2️⃣

      if (item.collapsed) {
        item.btnText = `It's true`
      } else {
        item.btnText = `It's false`
      }
    },
    addInput() {
      this.inputs.push({ 1️⃣
        id: this.id++,
        collapsed: true,
        btnText: `It's true`,
      })
    },
  },
}
</script>

<template>
  <div>
    <div v-for="item in inputs" :key="item.id">   3️⃣
      <b-button @click="changeText(item)">{{ item.btnText }}</b-button>
    </div>

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

demo

单击具有唯一 ID 后如何切换 <b-button> 文本

How to switch <b-button> text after click with unique id

javascript

vue.js

vuejs2