使用 vue 更改动态创建的按钮上的文本

Question

我正在使用 vue 中的一组动态创建的按钮。我的代码为数组中的每个对象创建一个按钮，并将按钮 ID 设置为对象的 ID。现在我有另一个对象数组，其中包含每个按钮根据其 id 应具有的文本。我不知道如何将名称与 ID 匹配。

感谢您的帮助！

            <b-row class="main-buttongroup-row1">
              <b-col
                lg="4"
                class="btn"
                v-for="Sub in Main[0].subs"
                :key="Sub.id"
              >
                <b-button
                  v-model="optionsButton"
                  :id="Sub.id"
                  @click="submit(Sub.id)"
                  >{{ optionsButton.text }}</b-button
                >
              </b-col>
            </b-row>

这是我的数组“Main”的样子：

var Main = [
{
   id:3
   num: 3
   scale: 100
   subs: [
       { id: 5, count:2 }
       { id: 1, count:1 }
       { id: 2, count:2 }]
}]

这是需要匹配的文本数组：

  data() {
    return {
      showAlert: false,
      optionsButton: [
        { text: "text1", value: 1 },
        { text: "text2", value: 2 },
        { text: "text3", value: 3 },
        { text: "text4", value: 4 },
        { text: "text5", value: 5 },
        { text: "text6", value: 6 }
      ],
    };
  }

Answer 1

您可以使用一种方法为您执行此操作，该方法将获取 ID 和 return 文本。

模板

<b-row class="main-buttongroup-row1">
   <b-col lg="4" class="btn" v-for="Sub in Main[0].subs" :key="Sub.id">
      <b-button v-model="optionsButton" :id="Sub.id" @click="submit(Sub.id)">{{ getButtonText(Sub.id) }}</b-button>
   </b-col>
</b-row>

.Vue

data() {
  return {
    showAlert: false,
    optionsButton: [
      { text: "text1", value: 1 },
      { text: "text2", value: 2 },
      { text: "text3", value: 3 },
      { text: "text4", value: 4 },
      { text: "text5", value: 5 },
      { text: "text6", value: 6 }
    ],
    methods: {
      getButtonText(id) {
        return this.optionsButton.filter(opts => opts.value === id)[0].text
      }
    }
  };
}

使用 vue 更改动态创建的按钮上的文本

Change text on dynamically created buttons with vue

vue.js

bootstrap-vue