使用选择时如何返回布尔值而不是字符串？答案

【问题标题】：How to return boolean and not string when using select?使用选择时如何返回布尔值而不是字符串？
【发布时间】：2017-12-29 02:45:15
【问题描述】：

我有这个：-

            <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，但是当我选择否然后allowMultiple='false' 所以它不再是布尔值而是字符串？如何让它成为布尔值？

【问题讨论】：

标签： vue.js vuejs2

【解决方案1】：

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

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

也许它对任何人都有用。

【讨论】：

【解决方案2】：

试试这个：

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

【讨论】：

我试过了，仍然返回 1 和 0 作为字符串 '1' 和 '0'。想知道为什么会这样？你能测试一下吗？
在 javascript 端使用 parseInt(value)
javascript 方面？这是vue，这是javascript端，它是自己文件中的vue组件，没有其他javascript端

【解决方案3】：

在 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>

【讨论】：

你的意思是我应该这样做？
不起作用：错误无法编译，出现 1 个错误 ./resources/assets/js/components/content_type_blocks/blocks/TaxonomyBlock.vue 中的 2:25:13 PM 错误语法错误：分配给右值(151:8)
v-model='true' 但不是v-model=true
相同，已经尝试了两种变体，甚至我的编辑器都对这种语法感到疯狂，之后的一切都变成了不同的颜色，那么它应该
这是正确答案。请务必在定义选项时使用绑定语法：v-bind:value="true" 或简写 :value="true"。这种语法在Form Input Bindings documentation 中进行了简要但不充分的讨论。

【解决方案4】：

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

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

现在，每当用户更改所选选项时，它始终是布尔值。

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

<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>

【讨论】：