vue.js v-选择默认值答案

【问题标题】：vue.js v-select default valuevue.js v-选择默认值
【发布时间】：2019-06-05 14:49:10
【问题描述】：

我想使用 vue.js 为选择选项设置一个默认值

这是我的代码

 <v-select
        v-model="contact.title"
        :options="['Mr','Mrs','Ms']">
      </v-select>

和

export default {
 props: {
  contact: {
  type: Object,
  required: true,
 },

titles: {
     type: Array,
     required: true,
   },
  },
};

谢谢

【问题讨论】：

只需为作为prop传递的contact对象的title字段设置一个默认值。
您必须将contract.title 的值设置为数组['Mr','Mrs','Ms'] 中的值之一
这会引发错误，因为 props 不支持两种方式绑定
@mava 答案看起来不错，我完全错过了它的道具

标签： vue.js vuejs2 v-select

【解决方案1】：

试试这个。我认为这会奏效。

<v-select
  v-model="selected"
  :options="options">
</v-select>


data: () {
  return {
    selected: 'Option 1',
    options: ["Option 1","Option 2","Option 3"]
  }
},

【讨论】：

【解决方案2】：

Mutating a prop 不是 vue 中的最佳实践。你可以这样做：

<v-select
    v-model="selected"
    :options="['Mr','Mrs','Ms']">
</v-select>


data: function () {
  return {
    selected: '' || 'defaultValue'
  }
},

这样你就不会改变道具，你可以很容易地设置一个默认值。
如果您想将数据传递给父级，请查看：
Pass data to parent

【讨论】：

什么不起作用？默认值？控制台有错误吗？
是的，默认值不能显示，控制台没有错误