【问题标题】: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>

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2012-04-30
        • 1970-01-01
        • 1970-01-01
        • 2020-09-06
        • 2018-07-28
        • 1970-01-01
        • 2016-01-07
        • 1970-01-01
        相关资源
        最近更新 更多