Vue.js - How to implement Computed properties on objects of array?











up vote
1
down vote

favorite












I have an array of objects inside my Vue instance, and for each item I'd like to write a Computed property.



Each object has only two properties: firstName and lastName. I would like to write a Computed property for each named 'fullName', which is just a concatenation of firstName and lastName.



I'm familiar with implementing Computed properties of data object properties of a Vue instances, but when it comes to doing so with elements of an array, I get confused.



Currently, my code is this:






var app = new Vue({
el: '#app',
data: {
names: [{
firstName: 'Mike',
lastName: 'McDonald',
done: false
},
{
firstName: 'Alex',
lastName: 'Nemeth',
done: false
},
{
firstName: 'Nate',
lastName: 'Kostansek',
done: true
},
{
firstName: 'Ivan',
lastName: 'Wyrsta',
done: true
}
]
},
computed: {
fullName: function(name) {
return name.lastName + ', ' + name.firstName;
}
}
methods: {
toggle: function(name) {
name.done = !name.done;
}
}
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div id='app'>
<ol>
<li v-for='name in names'>
<input type='checkbox' v-bind:checked='name.done' v-on:change='toggle(name)' />
<span v-if='!name.done'>{{ fullName(name) }}</span>
<del v-else>{{ fullName(name) }}</del>
</li>
</ol>
</div>





And here is the respective jsFiddle










share|improve this question




















  • 1




    Try to reduce the number of function calls in your template. The function results are not cached, meaning that pretty much every change in data causes a full re-render. Using a computed, by creating an array of pre-computed objects can greatly improve your apps performance. See @Boussadjra's updated (2nd) example
    – Daniel
    Nov 20 at 16:31















up vote
1
down vote

favorite












I have an array of objects inside my Vue instance, and for each item I'd like to write a Computed property.



Each object has only two properties: firstName and lastName. I would like to write a Computed property for each named 'fullName', which is just a concatenation of firstName and lastName.



I'm familiar with implementing Computed properties of data object properties of a Vue instances, but when it comes to doing so with elements of an array, I get confused.



Currently, my code is this:






var app = new Vue({
el: '#app',
data: {
names: [{
firstName: 'Mike',
lastName: 'McDonald',
done: false
},
{
firstName: 'Alex',
lastName: 'Nemeth',
done: false
},
{
firstName: 'Nate',
lastName: 'Kostansek',
done: true
},
{
firstName: 'Ivan',
lastName: 'Wyrsta',
done: true
}
]
},
computed: {
fullName: function(name) {
return name.lastName + ', ' + name.firstName;
}
}
methods: {
toggle: function(name) {
name.done = !name.done;
}
}
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div id='app'>
<ol>
<li v-for='name in names'>
<input type='checkbox' v-bind:checked='name.done' v-on:change='toggle(name)' />
<span v-if='!name.done'>{{ fullName(name) }}</span>
<del v-else>{{ fullName(name) }}</del>
</li>
</ol>
</div>





And here is the respective jsFiddle










share|improve this question




















  • 1




    Try to reduce the number of function calls in your template. The function results are not cached, meaning that pretty much every change in data causes a full re-render. Using a computed, by creating an array of pre-computed objects can greatly improve your apps performance. See @Boussadjra's updated (2nd) example
    – Daniel
    Nov 20 at 16:31













up vote
1
down vote

favorite









up vote
1
down vote

favorite











I have an array of objects inside my Vue instance, and for each item I'd like to write a Computed property.



Each object has only two properties: firstName and lastName. I would like to write a Computed property for each named 'fullName', which is just a concatenation of firstName and lastName.



I'm familiar with implementing Computed properties of data object properties of a Vue instances, but when it comes to doing so with elements of an array, I get confused.



Currently, my code is this:






var app = new Vue({
el: '#app',
data: {
names: [{
firstName: 'Mike',
lastName: 'McDonald',
done: false
},
{
firstName: 'Alex',
lastName: 'Nemeth',
done: false
},
{
firstName: 'Nate',
lastName: 'Kostansek',
done: true
},
{
firstName: 'Ivan',
lastName: 'Wyrsta',
done: true
}
]
},
computed: {
fullName: function(name) {
return name.lastName + ', ' + name.firstName;
}
}
methods: {
toggle: function(name) {
name.done = !name.done;
}
}
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div id='app'>
<ol>
<li v-for='name in names'>
<input type='checkbox' v-bind:checked='name.done' v-on:change='toggle(name)' />
<span v-if='!name.done'>{{ fullName(name) }}</span>
<del v-else>{{ fullName(name) }}</del>
</li>
</ol>
</div>





And here is the respective jsFiddle










share|improve this question















I have an array of objects inside my Vue instance, and for each item I'd like to write a Computed property.



Each object has only two properties: firstName and lastName. I would like to write a Computed property for each named 'fullName', which is just a concatenation of firstName and lastName.



I'm familiar with implementing Computed properties of data object properties of a Vue instances, but when it comes to doing so with elements of an array, I get confused.



Currently, my code is this:






var app = new Vue({
el: '#app',
data: {
names: [{
firstName: 'Mike',
lastName: 'McDonald',
done: false
},
{
firstName: 'Alex',
lastName: 'Nemeth',
done: false
},
{
firstName: 'Nate',
lastName: 'Kostansek',
done: true
},
{
firstName: 'Ivan',
lastName: 'Wyrsta',
done: true
}
]
},
computed: {
fullName: function(name) {
return name.lastName + ', ' + name.firstName;
}
}
methods: {
toggle: function(name) {
name.done = !name.done;
}
}
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div id='app'>
<ol>
<li v-for='name in names'>
<input type='checkbox' v-bind:checked='name.done' v-on:change='toggle(name)' />
<span v-if='!name.done'>{{ fullName(name) }}</span>
<del v-else>{{ fullName(name) }}</del>
</li>
</ol>
</div>





And here is the respective jsFiddle






var app = new Vue({
el: '#app',
data: {
names: [{
firstName: 'Mike',
lastName: 'McDonald',
done: false
},
{
firstName: 'Alex',
lastName: 'Nemeth',
done: false
},
{
firstName: 'Nate',
lastName: 'Kostansek',
done: true
},
{
firstName: 'Ivan',
lastName: 'Wyrsta',
done: true
}
]
},
computed: {
fullName: function(name) {
return name.lastName + ', ' + name.firstName;
}
}
methods: {
toggle: function(name) {
name.done = !name.done;
}
}
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div id='app'>
<ol>
<li v-for='name in names'>
<input type='checkbox' v-bind:checked='name.done' v-on:change='toggle(name)' />
<span v-if='!name.done'>{{ fullName(name) }}</span>
<del v-else>{{ fullName(name) }}</del>
</li>
</ol>
</div>





var app = new Vue({
el: '#app',
data: {
names: [{
firstName: 'Mike',
lastName: 'McDonald',
done: false
},
{
firstName: 'Alex',
lastName: 'Nemeth',
done: false
},
{
firstName: 'Nate',
lastName: 'Kostansek',
done: true
},
{
firstName: 'Ivan',
lastName: 'Wyrsta',
done: true
}
]
},
computed: {
fullName: function(name) {
return name.lastName + ', ' + name.firstName;
}
}
methods: {
toggle: function(name) {
name.done = !name.done;
}
}
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div id='app'>
<ol>
<li v-for='name in names'>
<input type='checkbox' v-bind:checked='name.done' v-on:change='toggle(name)' />
<span v-if='!name.done'>{{ fullName(name) }}</span>
<del v-else>{{ fullName(name) }}</del>
</li>
</ol>
</div>






javascript vue.js vuejs2 computed-properties






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 20 at 17:00









Boussadjra Brahim

4,7903629




4,7903629










asked Nov 20 at 16:04









Delfino

4191623




4191623








  • 1




    Try to reduce the number of function calls in your template. The function results are not cached, meaning that pretty much every change in data causes a full re-render. Using a computed, by creating an array of pre-computed objects can greatly improve your apps performance. See @Boussadjra's updated (2nd) example
    – Daniel
    Nov 20 at 16:31














  • 1




    Try to reduce the number of function calls in your template. The function results are not cached, meaning that pretty much every change in data causes a full re-render. Using a computed, by creating an array of pre-computed objects can greatly improve your apps performance. See @Boussadjra's updated (2nd) example
    – Daniel
    Nov 20 at 16:31








1




1




Try to reduce the number of function calls in your template. The function results are not cached, meaning that pretty much every change in data causes a full re-render. Using a computed, by creating an array of pre-computed objects can greatly improve your apps performance. See @Boussadjra's updated (2nd) example
– Daniel
Nov 20 at 16:31




Try to reduce the number of function calls in your template. The function results are not cached, meaning that pretty much every change in data causes a full re-render. Using a computed, by creating an array of pre-computed objects can greatly improve your apps performance. See @Boussadjra's updated (2nd) example
– Daniel
Nov 20 at 16:31












2 Answers
2






active

oldest

votes

















up vote
2
down vote



accepted










You could use fullname as method instead of computed property in your case :






var app = new Vue({
el: '#app',
data: {
names: [{
firstName: 'Mike',
lastName: 'McDonald',
done: false
},
{
firstName: 'Alex',
lastName: 'Nemeth',
done: false
},
{
firstName: 'Nate',
lastName: 'Kostansek',
done: true
},
{
firstName: 'Ivan',
lastName: 'Wyrsta',
done: true
}
]
},
computed: {

},
methods: {
fullName: function(name) {
return name.lastName + ', ' + name.firstName;
},
toggle: function(name) {
name.done = !name.done;
}
}
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div id='app'>
<ol>
<li v-for='name in names'>
<input type='checkbox' v-bind:checked='name.done' v-on:change='toggle(name)' />
<span v-if='!name.done'>{{ fullName(name) }}</span>
<del v-else>{{ fullName(name) }}</del>
</li>
</ol>
</div>





Another solution is to loop through names array inside a computed property by concatenating firstname and lastname, after that return this array and loop through it in your template






var app = new Vue({
el: '#app',
data: {
names: [{
firstName: 'Mike',
lastName: 'McDonald',
done: false
},
{
firstName: 'Alex',
lastName: 'Nemeth',
done: false
},
{
firstName: 'Nate',
lastName: 'Kostansek',
done: true
},
{
firstName: 'Ivan',
lastName: 'Wyrsta',
done: true
}
]
},
computed: {
fullNames() {
return this.names.map(name => {
let fl = {};
fl.fname = name.firstName + ", " + name.lastName;
fl.done = name.done;
return fl;
})
}
},
methods: {
fullName: function(name) {
return name.lastName + ', ' + name.firstName;
},
toggle: function(name) {
name.done = !name.done;
}
}
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div id='app'>
<ol>
<li v-for='name in fullNames'>
<input type='checkbox' v-bind:checked='name.done' v-on:change='toggle(name)' />
<span v-if='!name.done'>{{ name.fname }}</span>
<del v-else>{{ name.fname }}</del>
</li>
</ol>
</div>








share|improve this answer























  • Seems that if having to loop through each name in names in a Computed property, it would be easier to set up a method.
    – Delfino
    Nov 20 at 16:23






  • 1




    i added a second solution using computed property
    – Boussadjra Brahim
    Nov 20 at 16:25


















up vote
1
down vote













You can't use the 'computed' with a parameter.
Most probably you want to use a method:



example



<span>{{ fullName('Hi') }}</span>

methods: {
fullName(param) {
return `${this.param} ${this.firstName} ${this.lastName}`
}
}





share|improve this answer





















    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    autoActivateHeartbeat: false,
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














    draft saved

    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53396969%2fvue-js-how-to-implement-computed-properties-on-objects-of-array%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    2 Answers
    2






    active

    oldest

    votes








    2 Answers
    2






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes








    up vote
    2
    down vote



    accepted










    You could use fullname as method instead of computed property in your case :






    var app = new Vue({
    el: '#app',
    data: {
    names: [{
    firstName: 'Mike',
    lastName: 'McDonald',
    done: false
    },
    {
    firstName: 'Alex',
    lastName: 'Nemeth',
    done: false
    },
    {
    firstName: 'Nate',
    lastName: 'Kostansek',
    done: true
    },
    {
    firstName: 'Ivan',
    lastName: 'Wyrsta',
    done: true
    }
    ]
    },
    computed: {

    },
    methods: {
    fullName: function(name) {
    return name.lastName + ', ' + name.firstName;
    },
    toggle: function(name) {
    name.done = !name.done;
    }
    }
    });

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <div id='app'>
    <ol>
    <li v-for='name in names'>
    <input type='checkbox' v-bind:checked='name.done' v-on:change='toggle(name)' />
    <span v-if='!name.done'>{{ fullName(name) }}</span>
    <del v-else>{{ fullName(name) }}</del>
    </li>
    </ol>
    </div>





    Another solution is to loop through names array inside a computed property by concatenating firstname and lastname, after that return this array and loop through it in your template






    var app = new Vue({
    el: '#app',
    data: {
    names: [{
    firstName: 'Mike',
    lastName: 'McDonald',
    done: false
    },
    {
    firstName: 'Alex',
    lastName: 'Nemeth',
    done: false
    },
    {
    firstName: 'Nate',
    lastName: 'Kostansek',
    done: true
    },
    {
    firstName: 'Ivan',
    lastName: 'Wyrsta',
    done: true
    }
    ]
    },
    computed: {
    fullNames() {
    return this.names.map(name => {
    let fl = {};
    fl.fname = name.firstName + ", " + name.lastName;
    fl.done = name.done;
    return fl;
    })
    }
    },
    methods: {
    fullName: function(name) {
    return name.lastName + ', ' + name.firstName;
    },
    toggle: function(name) {
    name.done = !name.done;
    }
    }
    });

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <div id='app'>
    <ol>
    <li v-for='name in fullNames'>
    <input type='checkbox' v-bind:checked='name.done' v-on:change='toggle(name)' />
    <span v-if='!name.done'>{{ name.fname }}</span>
    <del v-else>{{ name.fname }}</del>
    </li>
    </ol>
    </div>








    share|improve this answer























    • Seems that if having to loop through each name in names in a Computed property, it would be easier to set up a method.
      – Delfino
      Nov 20 at 16:23






    • 1




      i added a second solution using computed property
      – Boussadjra Brahim
      Nov 20 at 16:25















    up vote
    2
    down vote



    accepted










    You could use fullname as method instead of computed property in your case :






    var app = new Vue({
    el: '#app',
    data: {
    names: [{
    firstName: 'Mike',
    lastName: 'McDonald',
    done: false
    },
    {
    firstName: 'Alex',
    lastName: 'Nemeth',
    done: false
    },
    {
    firstName: 'Nate',
    lastName: 'Kostansek',
    done: true
    },
    {
    firstName: 'Ivan',
    lastName: 'Wyrsta',
    done: true
    }
    ]
    },
    computed: {

    },
    methods: {
    fullName: function(name) {
    return name.lastName + ', ' + name.firstName;
    },
    toggle: function(name) {
    name.done = !name.done;
    }
    }
    });

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <div id='app'>
    <ol>
    <li v-for='name in names'>
    <input type='checkbox' v-bind:checked='name.done' v-on:change='toggle(name)' />
    <span v-if='!name.done'>{{ fullName(name) }}</span>
    <del v-else>{{ fullName(name) }}</del>
    </li>
    </ol>
    </div>





    Another solution is to loop through names array inside a computed property by concatenating firstname and lastname, after that return this array and loop through it in your template






    var app = new Vue({
    el: '#app',
    data: {
    names: [{
    firstName: 'Mike',
    lastName: 'McDonald',
    done: false
    },
    {
    firstName: 'Alex',
    lastName: 'Nemeth',
    done: false
    },
    {
    firstName: 'Nate',
    lastName: 'Kostansek',
    done: true
    },
    {
    firstName: 'Ivan',
    lastName: 'Wyrsta',
    done: true
    }
    ]
    },
    computed: {
    fullNames() {
    return this.names.map(name => {
    let fl = {};
    fl.fname = name.firstName + ", " + name.lastName;
    fl.done = name.done;
    return fl;
    })
    }
    },
    methods: {
    fullName: function(name) {
    return name.lastName + ', ' + name.firstName;
    },
    toggle: function(name) {
    name.done = !name.done;
    }
    }
    });

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <div id='app'>
    <ol>
    <li v-for='name in fullNames'>
    <input type='checkbox' v-bind:checked='name.done' v-on:change='toggle(name)' />
    <span v-if='!name.done'>{{ name.fname }}</span>
    <del v-else>{{ name.fname }}</del>
    </li>
    </ol>
    </div>








    share|improve this answer























    • Seems that if having to loop through each name in names in a Computed property, it would be easier to set up a method.
      – Delfino
      Nov 20 at 16:23






    • 1




      i added a second solution using computed property
      – Boussadjra Brahim
      Nov 20 at 16:25













    up vote
    2
    down vote



    accepted







    up vote
    2
    down vote



    accepted






    You could use fullname as method instead of computed property in your case :






    var app = new Vue({
    el: '#app',
    data: {
    names: [{
    firstName: 'Mike',
    lastName: 'McDonald',
    done: false
    },
    {
    firstName: 'Alex',
    lastName: 'Nemeth',
    done: false
    },
    {
    firstName: 'Nate',
    lastName: 'Kostansek',
    done: true
    },
    {
    firstName: 'Ivan',
    lastName: 'Wyrsta',
    done: true
    }
    ]
    },
    computed: {

    },
    methods: {
    fullName: function(name) {
    return name.lastName + ', ' + name.firstName;
    },
    toggle: function(name) {
    name.done = !name.done;
    }
    }
    });

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <div id='app'>
    <ol>
    <li v-for='name in names'>
    <input type='checkbox' v-bind:checked='name.done' v-on:change='toggle(name)' />
    <span v-if='!name.done'>{{ fullName(name) }}</span>
    <del v-else>{{ fullName(name) }}</del>
    </li>
    </ol>
    </div>





    Another solution is to loop through names array inside a computed property by concatenating firstname and lastname, after that return this array and loop through it in your template






    var app = new Vue({
    el: '#app',
    data: {
    names: [{
    firstName: 'Mike',
    lastName: 'McDonald',
    done: false
    },
    {
    firstName: 'Alex',
    lastName: 'Nemeth',
    done: false
    },
    {
    firstName: 'Nate',
    lastName: 'Kostansek',
    done: true
    },
    {
    firstName: 'Ivan',
    lastName: 'Wyrsta',
    done: true
    }
    ]
    },
    computed: {
    fullNames() {
    return this.names.map(name => {
    let fl = {};
    fl.fname = name.firstName + ", " + name.lastName;
    fl.done = name.done;
    return fl;
    })
    }
    },
    methods: {
    fullName: function(name) {
    return name.lastName + ', ' + name.firstName;
    },
    toggle: function(name) {
    name.done = !name.done;
    }
    }
    });

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <div id='app'>
    <ol>
    <li v-for='name in fullNames'>
    <input type='checkbox' v-bind:checked='name.done' v-on:change='toggle(name)' />
    <span v-if='!name.done'>{{ name.fname }}</span>
    <del v-else>{{ name.fname }}</del>
    </li>
    </ol>
    </div>








    share|improve this answer














    You could use fullname as method instead of computed property in your case :






    var app = new Vue({
    el: '#app',
    data: {
    names: [{
    firstName: 'Mike',
    lastName: 'McDonald',
    done: false
    },
    {
    firstName: 'Alex',
    lastName: 'Nemeth',
    done: false
    },
    {
    firstName: 'Nate',
    lastName: 'Kostansek',
    done: true
    },
    {
    firstName: 'Ivan',
    lastName: 'Wyrsta',
    done: true
    }
    ]
    },
    computed: {

    },
    methods: {
    fullName: function(name) {
    return name.lastName + ', ' + name.firstName;
    },
    toggle: function(name) {
    name.done = !name.done;
    }
    }
    });

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <div id='app'>
    <ol>
    <li v-for='name in names'>
    <input type='checkbox' v-bind:checked='name.done' v-on:change='toggle(name)' />
    <span v-if='!name.done'>{{ fullName(name) }}</span>
    <del v-else>{{ fullName(name) }}</del>
    </li>
    </ol>
    </div>





    Another solution is to loop through names array inside a computed property by concatenating firstname and lastname, after that return this array and loop through it in your template






    var app = new Vue({
    el: '#app',
    data: {
    names: [{
    firstName: 'Mike',
    lastName: 'McDonald',
    done: false
    },
    {
    firstName: 'Alex',
    lastName: 'Nemeth',
    done: false
    },
    {
    firstName: 'Nate',
    lastName: 'Kostansek',
    done: true
    },
    {
    firstName: 'Ivan',
    lastName: 'Wyrsta',
    done: true
    }
    ]
    },
    computed: {
    fullNames() {
    return this.names.map(name => {
    let fl = {};
    fl.fname = name.firstName + ", " + name.lastName;
    fl.done = name.done;
    return fl;
    })
    }
    },
    methods: {
    fullName: function(name) {
    return name.lastName + ', ' + name.firstName;
    },
    toggle: function(name) {
    name.done = !name.done;
    }
    }
    });

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <div id='app'>
    <ol>
    <li v-for='name in fullNames'>
    <input type='checkbox' v-bind:checked='name.done' v-on:change='toggle(name)' />
    <span v-if='!name.done'>{{ name.fname }}</span>
    <del v-else>{{ name.fname }}</del>
    </li>
    </ol>
    </div>








    var app = new Vue({
    el: '#app',
    data: {
    names: [{
    firstName: 'Mike',
    lastName: 'McDonald',
    done: false
    },
    {
    firstName: 'Alex',
    lastName: 'Nemeth',
    done: false
    },
    {
    firstName: 'Nate',
    lastName: 'Kostansek',
    done: true
    },
    {
    firstName: 'Ivan',
    lastName: 'Wyrsta',
    done: true
    }
    ]
    },
    computed: {

    },
    methods: {
    fullName: function(name) {
    return name.lastName + ', ' + name.firstName;
    },
    toggle: function(name) {
    name.done = !name.done;
    }
    }
    });

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <div id='app'>
    <ol>
    <li v-for='name in names'>
    <input type='checkbox' v-bind:checked='name.done' v-on:change='toggle(name)' />
    <span v-if='!name.done'>{{ fullName(name) }}</span>
    <del v-else>{{ fullName(name) }}</del>
    </li>
    </ol>
    </div>





    var app = new Vue({
    el: '#app',
    data: {
    names: [{
    firstName: 'Mike',
    lastName: 'McDonald',
    done: false
    },
    {
    firstName: 'Alex',
    lastName: 'Nemeth',
    done: false
    },
    {
    firstName: 'Nate',
    lastName: 'Kostansek',
    done: true
    },
    {
    firstName: 'Ivan',
    lastName: 'Wyrsta',
    done: true
    }
    ]
    },
    computed: {

    },
    methods: {
    fullName: function(name) {
    return name.lastName + ', ' + name.firstName;
    },
    toggle: function(name) {
    name.done = !name.done;
    }
    }
    });

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <div id='app'>
    <ol>
    <li v-for='name in names'>
    <input type='checkbox' v-bind:checked='name.done' v-on:change='toggle(name)' />
    <span v-if='!name.done'>{{ fullName(name) }}</span>
    <del v-else>{{ fullName(name) }}</del>
    </li>
    </ol>
    </div>





    var app = new Vue({
    el: '#app',
    data: {
    names: [{
    firstName: 'Mike',
    lastName: 'McDonald',
    done: false
    },
    {
    firstName: 'Alex',
    lastName: 'Nemeth',
    done: false
    },
    {
    firstName: 'Nate',
    lastName: 'Kostansek',
    done: true
    },
    {
    firstName: 'Ivan',
    lastName: 'Wyrsta',
    done: true
    }
    ]
    },
    computed: {
    fullNames() {
    return this.names.map(name => {
    let fl = {};
    fl.fname = name.firstName + ", " + name.lastName;
    fl.done = name.done;
    return fl;
    })
    }
    },
    methods: {
    fullName: function(name) {
    return name.lastName + ', ' + name.firstName;
    },
    toggle: function(name) {
    name.done = !name.done;
    }
    }
    });

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <div id='app'>
    <ol>
    <li v-for='name in fullNames'>
    <input type='checkbox' v-bind:checked='name.done' v-on:change='toggle(name)' />
    <span v-if='!name.done'>{{ name.fname }}</span>
    <del v-else>{{ name.fname }}</del>
    </li>
    </ol>
    </div>





    var app = new Vue({
    el: '#app',
    data: {
    names: [{
    firstName: 'Mike',
    lastName: 'McDonald',
    done: false
    },
    {
    firstName: 'Alex',
    lastName: 'Nemeth',
    done: false
    },
    {
    firstName: 'Nate',
    lastName: 'Kostansek',
    done: true
    },
    {
    firstName: 'Ivan',
    lastName: 'Wyrsta',
    done: true
    }
    ]
    },
    computed: {
    fullNames() {
    return this.names.map(name => {
    let fl = {};
    fl.fname = name.firstName + ", " + name.lastName;
    fl.done = name.done;
    return fl;
    })
    }
    },
    methods: {
    fullName: function(name) {
    return name.lastName + ', ' + name.firstName;
    },
    toggle: function(name) {
    name.done = !name.done;
    }
    }
    });

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
    <div id='app'>
    <ol>
    <li v-for='name in fullNames'>
    <input type='checkbox' v-bind:checked='name.done' v-on:change='toggle(name)' />
    <span v-if='!name.done'>{{ name.fname }}</span>
    <del v-else>{{ name.fname }}</del>
    </li>
    </ol>
    </div>






    share|improve this answer














    share|improve this answer



    share|improve this answer








    edited Nov 20 at 16:24

























    answered Nov 20 at 16:13









    Boussadjra Brahim

    4,7903629




    4,7903629












    • Seems that if having to loop through each name in names in a Computed property, it would be easier to set up a method.
      – Delfino
      Nov 20 at 16:23






    • 1




      i added a second solution using computed property
      – Boussadjra Brahim
      Nov 20 at 16:25


















    • Seems that if having to loop through each name in names in a Computed property, it would be easier to set up a method.
      – Delfino
      Nov 20 at 16:23






    • 1




      i added a second solution using computed property
      – Boussadjra Brahim
      Nov 20 at 16:25
















    Seems that if having to loop through each name in names in a Computed property, it would be easier to set up a method.
    – Delfino
    Nov 20 at 16:23




    Seems that if having to loop through each name in names in a Computed property, it would be easier to set up a method.
    – Delfino
    Nov 20 at 16:23




    1




    1




    i added a second solution using computed property
    – Boussadjra Brahim
    Nov 20 at 16:25




    i added a second solution using computed property
    – Boussadjra Brahim
    Nov 20 at 16:25












    up vote
    1
    down vote













    You can't use the 'computed' with a parameter.
    Most probably you want to use a method:



    example



    <span>{{ fullName('Hi') }}</span>

    methods: {
    fullName(param) {
    return `${this.param} ${this.firstName} ${this.lastName}`
    }
    }





    share|improve this answer

























      up vote
      1
      down vote













      You can't use the 'computed' with a parameter.
      Most probably you want to use a method:



      example



      <span>{{ fullName('Hi') }}</span>

      methods: {
      fullName(param) {
      return `${this.param} ${this.firstName} ${this.lastName}`
      }
      }





      share|improve this answer























        up vote
        1
        down vote










        up vote
        1
        down vote









        You can't use the 'computed' with a parameter.
        Most probably you want to use a method:



        example



        <span>{{ fullName('Hi') }}</span>

        methods: {
        fullName(param) {
        return `${this.param} ${this.firstName} ${this.lastName}`
        }
        }





        share|improve this answer












        You can't use the 'computed' with a parameter.
        Most probably you want to use a method:



        example



        <span>{{ fullName('Hi') }}</span>

        methods: {
        fullName(param) {
        return `${this.param} ${this.firstName} ${this.lastName}`
        }
        }






        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Nov 20 at 16:17









        Seb

        8029




        8029






























            draft saved

            draft discarded




















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.





            Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


            Please pay close attention to the following guidance:


            • Please be sure to answer the question. Provide details and share your research!

            But avoid



            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.


            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53396969%2fvue-js-how-to-implement-computed-properties-on-objects-of-array%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            Popular posts from this blog

            Wiesbaden

            Marschland

            Dieringhausen