Computed property for array element


I have a “books” array under data, and I would need a computed property for each element (array) in there. For example for each book have a computed property “summary”, with something like “title - authors - publisher (year)”. How I go about this. The docs on computed properties seem to focus on single properties, and not inside existing array elements.

How to format date for display

You cant nest computed properties like how I think you may be looking at this. Just think of a computed property outputting something, and that can be based on another computed property, or data, or prop.

create a computed property called I dunno fullBooksList, what ever,

Run a map over your books variable in data, and manually update/add each summary, and return the new output, then use this computed property in your components template instead of the books array in data. This is a common practice to use a computed property to return a new result from an original source.


I thought of something like the computed property function receiving a parameter, the current element in the for loop when I walk over any array under data.


a property is just that, a proprety. Properties dont receive parameters. You cant send a parameter to a proprety that holds an integer 1, If you need to pass in variables for some reason, use a method/function instead.

Otherwise, if you’re doing something like you just want to modify the orignal array based on other properties on the component, use a computed property, to compute its output based on its other requriements.

You could use a method like this

method: {
  generateSomething (parameter) {
    // loop over array with parameter, reference in template generateSomething('myParam')

Or if you’re just wanting to do something like this

computed: {
    booksList () {    //referebced in your template just as booksList
      return (b) => {
        b.summary = + " " +b.title
        return b

Now the fun thing about computed properties, is it understands what its related to. if this.books updates, like a new entry added to it, the computed property is automatically re computed and your template updates accordingly. This however, will not happen with a method / function and will require you to do some extra watches.


Would this work for setting values in an array too? Computed properties allow get/set methods, but I could not get it to work with computed array properties yet.


I’m trying to do exactly this – getters and setters for an array computed property, e.g.

  <div id="app">
      <input type="number" v-model="arr[0]">
      <input type="number" v-model="arr[1]">
      <input type="number" v-model="arr[2]">
      <input type="number" v-model="arr[3]">  
      <input type="number" v-model="comp[0]">
      <input type="number" v-model="comp[1]">
      <input type="number" v-model="comp[2]">
      <input type="number" v-model="comp[3]">  

and the JS:

var vm = new Vue({
  data: {
    arr: [0,1,2,3]
  computed: {
    comp: {
      get: function() {
        return this.arr.slice();

      /* SET won't work */
      set: function(arr) {
        arr.forEach(function(el,idx) {
          this.arr[idx] = el;

see the following JsBin:,js,output

If you change the numbers in the first row, the getter retrieves the array as expected in the second row.
Conversely, the setter doesn’t seem to work at all.


I’d probably push everything into a sub component and pass each item as a prop rather than mucking about with arrays


Well davestewart is right - it’s better. But do we need to mention in documentation that nested values of computed properties doesn’t invoke setter method?