Question

我有： -

            <div class="form-group">
                <label for="">Allow Multiple</label>
                <select class="form-control" v-model="allowMultiple">
                    <option value=true>Yes</option>
                    <option value=false>No</option>
                </select>
            </div>

我在初始化时设置allowMultiple=true，但是当我选择No然后allowMultiple='false'那么它不再是布尔而是字符串？如何让它成为布尔值？

Answer 1

在HTML中，如果在标记中设置属性值，则该值将为默认类型 - string。因此，您可以使用vue v-model将其绑定到其他类型值，例如，布尔值，数字等以下代码正常运行，结果就是您想要的结果

new Vue({
  el:'#app',
  data: {
    allowMultiple: false
  },
  methods: {
    print: function () {
      alert(this.allowMultiple);
    }
  }
})

<div class="form-group" id='app'>
   <label for="">Allow Multiple</label>
   <select class="form-control" v-model="allowMultiple" @change='print'>
        <option :value='true'>Yes</option>
        <option :value='false'>No</option>
   </select>
</div>
<script src="https://unpkg.com/vue@2.4.2/dist/vue.min.js"></script>

Answer 2

这是一种在Vue中完成此操作的方法。而不是在HTML中硬编码您的选项。使用Vue方式，在Vue数据中设置一个选项数组，然后使用v-for渲染数组中的所有选项。

每个选项应该有2个属性：文本和值。该值应该是您要查找的布尔值。

现在，只要用户更改所选选项，它就会一直是布尔值。

＆＃13;

new Vue({
  el: '#app',
  data: {
    allowMultiple: true,
    options: [
      {text: 'Yes', value: true},
      {text: 'No', value: false},
    ],
  }
})

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>


<div id="app">
  <div class="form-group">

      <div>Allow multiple: {{allowMultiple}}  [Type: {{typeof allowMultiple}}]</div><br>

      <label for="">Allow Multiple</label>
      <select class="form-control" v-model="allowMultiple">
          <option v-for="option in options" :value="option.value">{{option.text}}</option>
      </select>
  </div>
</div>

＆＃13;

Answer 3

我发现对我有用的更简单快捷的方法是：

<select id="selected" v-model="item.selected">
    <option :value=0>No</option>
    <option :value=1>Yes</option>
</select>

也许它对任何人都有用。

Answer 4

试试这个：

<option value=1>Yes</option>
<option value=0>No</option>

使用select时如何返回布尔值而不是字符串？

4 个答案: