使用 TypeScript 从单击事件 VueJS 的下拉列表中更改按钮文本值答案

【问题标题】：Change button text value from dropdown list on click event VueJS with TypeScript使用 TypeScript 从单击事件 VueJS 的下拉列表中更改按钮文本值
【发布时间】：2019-11-06 00:49:32
【问题描述】：

我有按钮，它有打开下拉列表的点击事件。当用户从列表中选择选项时我想要什么，它应该根据用户选择更新按钮文本并从下拉列表中删除。当我使用 {{interestSortingOptions.label}} 时，它是空的，没有任何显示。

这是我的代码

<button
    @click="interested = !interested"
>
   {{interestSortingOptions.label}}
   <sort-options
     v-if="interested && interestSortingOptions.length"
     :options="interestSortingOptions"
     />
</button>

export default class DetailFollow extends Vue {
    private interested: boolean = false

    private interestSortingOptions: SortingOption[] = [{
            label: 'Interested',
            value: 'interested',
        },
        {
            label: 'Scenario',
            value: 'scenario',
        },
        {
            label: 'Screening',
            value: 'screening',
        },
        {
            label: 'Offer',
            value: 'offer',
        }]

}

谁能帮我解决这个问题，我该怎么做？

提前致谢。

【问题讨论】：

所以从我所见，您的按钮既是列表也是按钮？如果您对列表使用<select> 元素，那么您可以为<select> 元素的onchange() 事件附加一个函数，该函数可以删除所选项目。
另外：您的声明中有两次interested: boolean = false。而{{interestSortingOptions.label}} 不起作用，因为interestSortingOptions 是一个对象数组。您必须使用 {{interestSortingOptions[0].label}} 才能使其工作（索引来自循环或硬编码）。
按钮不是列表。是的，我可以使用
哪个下拉列表？如果你没有

标签： javascript html typescript vue.js

【解决方案1】：

我为您创建了一支笔，我相信它可以满足您的需求，但使用 <select> 元素而不是按钮：https://codepen.io/xon5/pen/ewWqEa 即使没有，我想你也会在那里找到方法。

模板：

<div id="app">
  <select v-model="selectedOption" @change="showInterest">
    <option v-for="iOption in interestSortingOptions" :key="iOption.value" :value="iOption.value">{{iOption.label}}</option>
  </select>
  <p>Selected: {{interestsSelected.join(', ')}}</p>
</div>

Vue 对象：

new Vue({
  el: "#app",
  data() {
    return {
      selectedOption: null,
      interestsSelected: [],
      interestSortingOptions: [
        {
          label: "Interested",
          value: "interested"
        },
        {
          label: "Scenario",
          value: "scenario"
        },
        {
          label: "Screening",
          value: "screening"
        },
        {
          label: "Offer",
          value: "offer"
        }
      ],
    interested: false
  };
},
methods: {
  showInterest() {
    this.interestsSelected.push(this.selectedOption);
    this.interestSortingOptions = this.interestSortingOptions.filter(v => {
      return v.value !== this.selectedOption;
    });
    this.selectedOption = null;
  }
}
});

【讨论】：