Question

我是vue.js的新手，并尝试为我的选择框创建一个组件。我想通过父组件将默认值传递给select时遇到困难。

现在我在父组件中有这个

<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给了我一个警告，我不能改变道具。我是怎么想的，我想在不改变模型到选择的情况下为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/

选择Component Vue JS - 默认选择值

1 个答案: