首页 文章

选择Component Vue JS - 默认选择值

提问于
浏览 次
2

我是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给了我一个警告，我不能改变道具 . 我怎么样我想设置一个默认值而不将模型改为prop选择？

javascript components vue.js

1 回答

  • 3

    欢迎来到SO！

    Vue不喜欢你直接修改 prop ，而是将它们传递给数据（或使用计算机）并修改该值，你可以在创建的钩子里面做：

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

    然后你可以将你的选择框绑定到：

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

    我创建了一个简化的小提琴，向您展示它是如何工作的：

    https://jsfiddle.net/6h8gam1c/

    回复于

相关问题