我如何连接按钮，并凭借其在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模型吗？现在的原因，我可以从列表中选择选项。那么我该怎么做。如果我将@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

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

你必须拿出一些特殊情况的处理要解决这个问题。一种方法是选择列表设置为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>