ボタンを接続してVue JSのオプションで選択するにはどうすればいいですか

Question

私は立ち往生しました。たぶん私の問題には簡単な解決策があります。私を助けてください。 ここに問題があります。

5つの選択肢があります。私のレイアウトは、ドロップダウンメニューを選択二つのボタンあると

[E、A、B、C、D]のは、を言ってみましょう。

どちらでも、2つのボタンのいずれかをクリックするか、リストから選択します。 言い換えれば、私は、ユーザーには2つの可能性を与えます。

ので、テンプレートは、私は一つにこれらの三つの要素を組み合わせることができますどのように

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

を持って私のスクリプトではちょっと

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

です。どうにかして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  
    } 
} 

のように、自分の状態を処理するために、そしてすべてのクリックがtrueにfalseを変更し、また、が必要であるほかのロジックが一つだけ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にリセットされます。

これを回避するには、特殊な処理が必要です。 1つの方法は、選択リストをv-modelに設定し、設定されていない値を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>