使用計算的屬性setter和getter更新數據的屬性

Question

我有以下的組件標記

<select id="create-user-roles" class="form-control" v-bind="role"> 
            <option v-for="role in roles" :value="role.id">{{ role.label }}</option> 
           </select> 

，並具有以下部件

.......... 
data() { 
     return { 
     roles: [ 
     {name: 'something', id:0 },..,..,..,], 
     form: { 
      ...... 
      roles: null, 
     } 
     } 
    }, 
    computed: { 
     role: { 
     get: function(){ 
      if(this.userData == undefined) return null; 

      return this.userData.roles[0].id; 
     }, 
     set: function(id) { 
      console.log(id); 
      var role = this.$data.roles.filter(function(o){ 
      return o.id === id 
      }).name; 
      console.log(role); 
      this.$data.form.roles = [role]; 
      console.log(this.form.roles); 
     } 
     } 
    }, 
........... 

在我的組件方法的功能我做

this.form = Object.assign({}, this.userData)); // userData is a prop passed down from parent with {roles:[{id: 0, name: 'something' }]} 

當我改變選擇它不更新form.roles無線th role二傳手

事實上，它似乎並沒有出現任何東西被解僱！

我在這裏做錯了什麼？

Answer 1

主要問題是v-bind。如果要在select元素和角色的值之間進行雙向綁定，則需要使用v-model。

在setter中還有一個bug。該生產線

var role = this.$data.roles.filter(function(o){ 
    return o.id === id 
}).name; 

不會起作用，因爲filter返回一個列表，而不是從列表中的項目。

隨着這些更改，您的代碼應該工作。下面是與變化的片段：

Vue.component('child', { 
 
\t template: '#child', 
 
    props: ['userData'], 
 
    data() { 
 
    return { 
 
     roles: [ 
 
     {name: 'something0', id:0 }, 
 
     {name: 'something1', id:1 }, 
 
     {name: 'something2', id:2 }, 
 
     ], 
 
     form: { roles: null } 
 
    } 
 
    }, 
 
    computed: { 
 
    role: { 
 
     get: function(){ 
 
     if(this.userData == undefined) return null; 
 
     return this.userData.roles[0].id; 
 
     }, 
 
     set: function(id) { 
 
     var role = this.roles.filter(role => role.id === id)[0]; 
 
     Vue.set(this.form.roles, 0, role); 
 
     } 
 
    } 
 
    }, 
 
    created: function() { 
 
    \t this.form = Object.assign({}, this.userData); 
 
    } 
 
}); 
 

 
new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    \t userData: { 
 
    \t roles: [ {id: 0, name: 'something' } ] 
 
    } 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script> 
 

 
<div id="app"> 
 
    <child :user-data="userData"></child> 
 
</div> 
 

 
<template id="child"> 
 
    <div> 
 
    <select v-model="role"> 
 
     <option v-for="role in roles" :value="role.id">{{ role.name }}</option> 
 
    </select> 
 
    <p>JSON.stringify(form):</p> 
 
    <pre>{{JSON.stringify(form, null, 2)}}</pre> 
 
    </div> 
 
</template>