时间戳

首页 > 解决方案 > Vue.js 选择所有选项

vue.js - Vue.js 选择所有选项

问题描述

我尝试使用 Vue.js 制作一个带有选项列表的 Select 和一个名为“Any”的选项，它将选择所有选项。

我想使用 HTML 选择标签，而不是复选框。

我正在尝试做这样的事情，但我不确定这是正确的方法。

<div id="app">
    <select v-model="selected">
        <option v-for="option in options" v-bind:value="option.value">{{option.text}}</option>
    </select>

    <span>Selected: {{ selected }}</span>
</div>

let app = new Vue({
    el: '#app',
    data: {
        selected: ['A', 'B', 'C'],
        options: [
            { text: 'One', value: 'A' },
            { text: 'Two', value: 'B' },
            { text: 'Three', value: 'C' },
            { text: 'Any', value: ['A', 'B', 'C'] },
       ]
    }
});

标签： vue.jsvuejs2

解决方案

您的数据属性必须是函数而不是对象。尝试这个：

data(){
    return {
        selected: ['A', 'B', 'C'],
        options: [
            { text: 'One', value: 'A' },
            { text: 'Two', value: 'B' },
            { text: 'Three', value: 'C' },
            { text: 'Any', value: ['A', 'B', 'C'] },
       ]
    }
  }

另请参阅在几乎所有情况下都必须将数据作为函数的文档。

推荐阅读