VueJS和下拉值

Question

我是否在此Vue模板表单中错误地获取了选择的值？

<select class="form-control" v-model="object.property">
        <option selected="selected" value="Option 1">Option 1</option>
        <option value="Option 2">Option 2</option>
      </select>

Answer 1

您正确地将object.property的值绑定到选择元素。

但是，Vue将忽略第一个选项元素上的selected属性。

如果您尝试使用此模板，则会出现警告：

  使用v-model时，将忽略{p}上的

内联选定属性。而是在组件的数据选项中声明初始值。

因此，如果您希望将select的初始值作为第一个选项，请在<option>方法中将object.property设置为该值。

以下是一个例子：

＆＃13;

＆＃13;

data

＆＃13;

new Vue({
  el: '#app',
  data() {
    return { object: { property: "Option 1" } } 
  }
})

＆＃13;

＆＃13;

＆＃13;