Vue spread an object as computed properties

Question

I have an array of objects called config, and a currentIdx property in my component. Then I found myself needing to do this:

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;
    }
}

I tried replacing all functions with:

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

It passed the compilation, but I got an error in the browser console. I think the problem is that computed requires functions, but the spread syntax (...) returns objects. So, my question is: Is there any way to reduce the repetition in this case?

Thanks!

user_3308290 · Answer

Computed values can return objects, they just need to be returned by the function. Let me know if this isn't what you intended and I'll see what I can do to help!

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];
    }
  }
});



  
  
    {{ currentObject.text }}

Vue spread an object as computed properties

1 Answers