使用计算属性 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' }]}

当我更改选择时，它不会使用 role 设置器更新 form.roles

事实上似乎没有任何东西被解雇！

我在这里做错了什么？

Answer 1

主要问题是v-bind。如果要在select 元素的值和角色之间进行双向绑定，则需要使用v-model。

setter 中还有一个错误。线

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

不起作用，因为filter 返回一个列表，而不是该列表中的项目。

进行这些更改后，您的代码应该可以工作了。这是一个带有更改的 sn-p：

Vue.component('child', {
	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() {
  	this.form = Object.assign({}, this.userData);
  }
});

new Vue({
  el: '#app',
  data: {
  	userData: {
    	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>