如何在 Vue JS 中连接按钮并使用其选项进行选择

Question

我被困住了，伙计们。也许我的问题有简单的解决方案。请帮我。 这就是问题所在。

我有 5 种可能的选项可供选择。假设 [a, b, c, d, e]

我的布局是两个按钮和选择下拉菜单。 换句话说，我给用户两种可能性：

点击两个按钮之一或从列表中选择。

所以模板有点儿

<button> A <button>
<button> B <button>
<select v-model="selected">
  <option :value="i" v-for="i in list">i</option>
</select> 

在我的脚本中

data () {
      return {
         list: ['c', 'd', 'e']
      }
    }

如何将这三个元素合二为一。我可以以某种方式使用 v-model 吗？现在的原因，我可以从列表中选择选项。那我该怎么办。如果我将 @click 事件添加到按钮，它们应该处理什么？

我想创建计算值，比如检查selected 是否未定义或等于''，那么选项是selected。但是为了绑定按钮点击事件，我应该创建方法来处理它们的状态，比如

data () {
      return {
         list: ['c', 'd', 'e'],
         a: false,
         b: false
      }
    },
methods: {
  handleA () {
    this.a = true
    this.b = false     
  },
  handleB () {
    this.b = true
    this.a = false     
  }
}

然后每次点击都会将false更改为true，此外还需要一个逻辑来只保留一个true状态：a（按钮A），b（按钮B) 或selected。感觉太不真实了。在我看来，我让事情变得更难了。必须有一个简单的方法。

Answer 1

我会推荐一个组件。构建支持v-model的组件。

Vue.component("picker",{
  props:["value"],
  data(){
    return {
      list:["c","d","e"],
      currentValue: this.value,
      selectedValue: ""
    }
  },
  template:`
    <div>
      <button @click="currentValue = 'a'">A</button>
      <button @click="currentValue = 'b'">B</button>
      <select @change="currentValue = $event.target.value" v-model="selectedValue">
          <option value="">Select a value</option>
          <option v-for="item in list" :value="item" :key="item">{{item}}</option>
      </select>
    </div>
  `,
  watch:{
    currentValue(newValue){
      if (!this.list.includes(newValue))
        this.selectedValue = "" 

      this.$emit('input', newValue)
    }
  }
})

new Vue({
  el:"#app",
  data:{
    pickedValue: null
  }
})

Example.

Answer 2

基本问题是，如果您在选择中 v-model 并且绑定到 v-model 的变量获得的值不在您的选项中，则该变量将重置为 null。

你必须想出一些特殊情况的处理来解决这个问题。一种方法是将选择列表设置为 v-model 一个可设置的计算值，它将未列出的值解释为 null 并将非 null 值写入 selected 数据项。

new Vue({
  el: '#app',
  data: {
    selected: null,
    list: ['c', 'd', 'e']
  },
  computed: {
    proxySelected: {
      get() {
        return this.list.includes(this.selected) ? this.selected : null;
      },
      set(newValue) {
        if (newValue) {
          this.selected = newValue;
        }
      }
    }
  }
});

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.min.js"></script>
<div id="app">
  <button @click="selected = 'a'"> A </button>
  <button @click="selected = 'b'"> B </button>
  <select v-model="proxySelected">
    <option :value="i" v-for="i in list">{{i}}</option>
  </select>
  Selected value: {{selected}}
</div>