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中这样做的方式。

Answer 2

option 元素的 value 属性在 HTML 中是字符串。您可以尝试根据布尔值选择此选项

<td>
    <select name="show" class="form-control country-show" v-model="country.show">
        <option v-bind:value="false">No</option>
        <option v-bind:value="true">Yes</option>
    </select>
</td>

Vue 2 - 选择使用布尔值选择的集合

2 个答案: