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給了我一個警告，我不能改變道具。我是如何爲選擇設置默認值而不將模型更改爲選擇的道具？

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/