Computed property for array element


#1

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

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.


#3

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.


#4

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 this.books.map( (b) => {
        b.summary = b.author + " " +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.


#5

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.


#6

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

  <div id="app">
    <div>
      <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]">  
    </div>
     <div>
      <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]">  
    </div>
  </div>

and the JS:

var vm = new Vue({
  el:'#app',
  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: http://jsbin.com/kuyotip/edit?html,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.


#7

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


#8

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?