javascript - 带有对象 Prop 的 Vue 计算 setter

Question

这个想法是将不同的对象传递给输入组件，将它们显示为 CSV 并能够编辑/验证文本并根据验证结果更改样式。这是我目前拥有的代码:

<div id="vue">
    <base-input :cslice="c.workspace"></base-input>
</div>

javascript:

(function () {

  Vue.component('base-input', {
    props: ['cslice'],
    data: function () {
      return {
        colors: ['red', 'white', 'yellow', 'green', 'orange', 'purple'],
        ind: 1
      }
    },
    computed: {
      str: {
        get: function () {
          return Object.values(this.cslice).join(", ");
        },
        set: function (val) {
          if(val.indexOf('0'))
            this.ind = Math.floor(this.colors.length * Math.random());
        },
      },
      styleObj: {
        get: function () {
          return { color: this.colors[this.ind] };
        },
        set: function () {

        },
      }
    },
    template: '<div><input v-model="str" :style="styleObj" type="text"/></div>'
  });

  let vue = new Vue({
    el: '#vue',
    data: {
      c: {},
    },
    created: function () {
      this.c = Object.assign({}, this.c, {
        workspace: { width: 820, height: 440 },
      });
    },

  });

})();

这是 fiddle :
https://jsfiddle.net/tfoller/sz946qe2/3/
此代码允许我仅在新样式与当前样式相同时删除最后一个字符，否则文本实际上不可编辑，如何解决此问题以便我能够正常编辑输入字段？

Answer 1

由于 child 中的计算在其 getter 中使用了 prop，因此您需要 $emit在其 setter 中备份具有相同形状的值:

set: function (val) {
   const arrValues = val.split(',').map(v => v.trim());
   console.log(arrValues);
   this.$emit('input', {
      width: arrValues[0],
      height: arrValues[1]
   })
},

这意味着颠倒一些你正在做的字符串格式化的东西，以获得正确的形状。
听那个 input父级中的事件。您可以将 Prop 名称更改为 value以便您可以使用 v-model作为听众:

<base-input v-model="c.workspace"></base-input>

将所有颜色更改功能移动到子项中的单独方法中，该方法也通过更改输入触发。这是一个演示:
Demo