Использования вычисленного сеттер свойства и поглотителя для обновления свойств данных

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); 
     } 
     } 
    }, 
........... 

В моей функции методов компонента I Do

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

Когда я меняю выбор, он не обновляет form.roles wi th role сеттер

Infact, похоже, что ничего не уволено!

Что я здесь делаю неправильно?

Answer 1

Основная проблема: v-bind. Если вам нужна двусторонняя привязка между значением элемента и роли select, вам необходимо использовать v-model.

В сеттере также есть ошибка. Линия

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>