Vue将对象传播为计算属性

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:

Thanks!

Answer 1

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

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