ビュー2 - ブール値で選択されたセットを選択

Question

ブール値に基づいて選択したオプションを設定する方法を教えてください。

country.showは、0または1にすることができ、それに基づいて、事前選択をしたいと思います。これはコードスニペットです：

<td> 
    <select name="show" class="form-control country-show"> 
     <option value="0" :selected="country.show == 0">No</option> 
     <option value="1" :selected="country.show == 1">Yes</option> 
    </select> 
</td> 

Answer 1

通常これはv-modelで行われます。 :value="country.show"を初期化し、他のバインドにはv-modelを使用することを前提としてもかまいません。

console.clear() 
 

 
new Vue({ 
 
    el: "#app", 
 
    data: { 
 
    country: { 
 
     show: 0 
 
    } 
 
    } 
 
})

<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script> 
 
<div id="app"> 
 
    <div> 
 
    <h2>Using v-model</h2> 
 
    <select name="show" v-model="country.show"> 
 
    <option value="0">No</option> 
 
    <option value="1">Yes</option> 
 
    </select> 
 
    </div> 
 

 

 

 
    <div> 
 
    <h2>Using :value</h2> 
 
    <select name="show" class="form-control country-show" :value="country.show"> 
 
     <option value="0">No</option> 
 
     <option value="1">Yes</option> 
 
    </select 
 
    </div> 
 
    
 
    <div> 
 
    <h2>Using code from your question</h2> 
 
    <select name="show" class="form-control country-show"> 
 
     <option value="0" :selected="country.show == 0">No</option> 
 
     <option value="1" :selected="country.show == 1">Yes</option> 
 
    </select 
 
    </div> 
 
</div>

あなたが事前に選択した値に作品を持っているものFWIWは、それはあなたが正常にVueの中でそれを行うだろうかだけではありません。