选择Component Vue JS-默认选择值

Question

我对vue.js不满意，并尝试为我的选择框创建一个组件。 我很难通过父组件将默认值传递给选择。

现在我在父组件中有这个

<div class="row">
  <div class="col-md-4">
    <active-dropdown :selected='selected', :options = 'active_options', @update = 'update_selected'></active>
  </div>
</div>

这是下拉菜单的组件

Vue.component 'active-dropdown',
  template: '#active-dropdown'

  props: ['options', 'selected']

  data: ->
    selection: { active_eq: 1, text: 'Active', show: true }

  methods:
    notify_selection: ->
      @.$emit('update', @.selection)

这是模板

<script id="active-dropdown" type="text/template">
  <div class="form-group">
    <label>Active</label>
    <select class="form-control" v-model="selection" v-on:change="notify_selection">
      <option v-bind:value="{ active_eq: option.value, text: option.text, show: true }" v-for="option in options">{{ option.text }}</option>
    </select>
  </div>
</script>

当我尝试将我选择的道具用作选择模型时，vue会警告我我无法更改道具。 我想如何在不将模型更改为prop selected的情况下为select设置默认值？

Answer 1

欢迎来到SO！

Vue不喜欢您直接修改prop ，而是将它们传递给数据（或使用计算值）并修改该值，您可以在创建的挂钩中执行此操作：

props: ['selected','options'],
created(){
  this.selectedOption = this.selected;
},
data(){
  return {
    selectedOption: ''
  }
}

然后，您可以将选择框绑定到该框：

<select v-model="selectedOption">...</select>

我创建了一个简化的小提琴，向您展示其工作方式：

https://jsfiddle.net/6h8gam1c/