使用v-for时设置初始v模型值

时间:2017-12-29 10:10:00

标签: javascript vue.js

我有一个选择,我想填充计算数据,它工作正常:

   <select style="width: 175px">
       <option>None</option>
       <option v-for="label in labels">{{label.description}</option>
    </select>

    var vm = new Vue({
            el: '#div',
            data: {
            },
            computed: {
                labels: function () {
                //return labels based on some logic
                }
            }
        });

但是我想将所选值绑定到属性,所以我将我的代码更改为:

   <select style="width: 175px" v-model=selectedLabel">
       <option>None</option>
       <option v-for="label in labels">{{label.description}</option>
    </select>

    var vm = new Vue({
            el: '#div',
            data: {
              selectedLabel: ''
            },
            computed: {
                labels: function () {
                //return labels based on some logic
                }
            }
        });

然后我在选择中根本没有数据。很明显,因为我将selectedLabel设置为&#39;&#39;,但我的选择中没有空选项。但我该如何解决这个问题呢?我不知道将要计算哪些数据,因此我无法预定义selectedLabel。

1 个答案:

答案 0 :(得分:1)

只需将选择选项的默认值设置为json.decoder.JSONDecodeError: Expecting value: line 1 column 1 (char 0) ,如:

''

这将自动选择<div id="app"> <select style="width: 175px" v-model="selectedLabel"> <option value="">None</option> <option v-for="label in labels" :value="label.value">{{label.description}}</option> </select> </div> 选项。

请参阅此fiddle

&#13;
&#13;
none
&#13;
var vm = new Vue({
  el: '#app',
  data: {
    selectedLabel: ''
  },
  computed: {
    labels: function () {
      return [
        {description:'test', value: 'test'}, 
        {description: 'test1', value: 'test1'}
      ]
    }
  }
});
&#13;
&#13;
&#13;