时间戳

首页 > 解决方案 > 如何切换点击后带有唯一 ID 的文本

javascript - 如何切换点击后带有唯一 ID 的文本

问题描述

我正在与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);

  }
}

标签： javascriptvue.jsvuejs2

解决方案

  1. 与其使用单独的数组来存储不同的字段，不如将它们移动到inputs[]对象数组中，以便 中的每个item都有v-for自己的id、collapsed和btnText。

  2. 然后更新changeText()以引用item参数中的字段。

  3. 还要更新模板以使用该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>

演示

推荐阅读