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模型吗？现在的原因，我可以从列表中选择选项。那我该怎么办如果我将 @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

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

你必须提出一些特殊情况处理来解决这个问题。一种方法是将选择列表设置为v-model一个可设置的计算表，用于将未列出的值解释为空，并将非空值写入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>

如何连接按钮并在Vue JS中选择其选项

2 个答案: