我如何連接按鈕，並憑藉其在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>