Vue 将一个对象作为计算属性展开

Question

我的组件中有一个名为 config 的对象数组和一个 currentIdx 属性。然后我发现自己需要这样做：

computed: {
    textStyle: function() {
        return this.config[this.currentIdx].textStyle;
    },
    text: function() {
        return this.config[this.currentIdx].text;
    },
    key: function() {
        return this.config[this.currentIdx].key;
    }
}

我尝试将所有函数替换为：

computed: {
    ...this.config[this.currentIdx]
}

编译通过了，但是浏览器控制台报错。我认为问题在于 computed 需要函数，但扩展语法 (...) returns 对象。所以，我的问题是：在这种情况下有什么办法可以减少重复吗？

谢谢！

Answer 1

计算值可以 return 个对象，它们只需要被函数 return 编辑。如果这不是您想要的，请告诉我，我会尽力提供帮助！

let vm = new Vue({
  el : "#root",
  data : {
    current : 0,
    arrs : [
      {
        color : "background-color: blue;",
        text : "Dabodee Dabodai"
      },
      {
        color : "background-color: red;",
        text : "Angry"
      },
      {
        color : "background-color: green;",
        text : "See it works!"
      }
    ]
  },
  computed : {
    currentObject : function() {
      return this.arrs[this.current];
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="root">
  <input type="number" v-model="current" min="0" max="2">
  <p :style="currentObject.color">
    {{ currentObject.text }}
  </p>
</div>

Vue 将一个对象作为计算属性展开

Vue spread an object as computed properties

javascript

ecmascript-6

vue.js

spread-syntax

vue-cli