Question

我有一个具有单击事件的按钮，它会打开下拉列表。我想要的，当用户从列表中选择选项时，它应该更新按钮文本并根据用户选择从下拉列表中删除。当我使用{{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',
        }]

}

有人可以帮我这个忙吗？

谢谢。

Answer 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;
  }
}
});

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

1 个答案: