Vue 将对象作为计算属性传播

Posted 2023-02-22

【中文标题】Vue 将对象作为计算属性传播

【英文标题】：Vue spread an object as computed properties

【发布时间】：2019-05-25 01:57:07

【问题描述】：

我的组件中有一个名为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 需要函数，但扩展语法 (...) 返回对象。所以，我的问题是：在这种情况下有什么方法可以减少重复吗？

谢谢！

【问题讨论】：

您可以创建一个包装助手，它将接收一个对象，并返回一个新对象，该对象具有映射到返回该键值的函数的相同键名，尽管我不确定这将如何玩弄计算的性质。

计算的属性定义无法识别您的组件实例，因为它们是在编译时创建的。

【参考方案1】：

计算值可以返回对象，它们只需要由函数返回。如果这不是您想要的，请告诉我，我会看看我能提供什么帮助！

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>

【讨论】：

是的，但每次我想使用它时，我仍然需要输入currentObject。是否可以直接声明组件下的属性，像：<p :style="color">而不是<p :style="currentObject.color">？

Afaik 不适用于纯 Vue.js 和 JS。也许使用 Vuex 或其他库组合。 @Bennet Hardwick 的回答是在 vanilla JS 中完成的，但丢失“currentObject”可能会使您的代码不那么清晰。祝你好运！

是的，你是对的，保留 currentObject 可以保护命名空间，所以我可能会这样做。

如果你愿意，你可以为color 计算。它只是return currentObject.color

@RoyJ 是的，你是对的。但是如果我在currentObject 中有一堆属性，我将不得不一个一个地创建这些计算值，这有点重复......