[Vuejs]-Binding length of one object from $data to another object

by

0👍

✅

Thanks @roy-j. Need to set options.limit.value binding also.
Check http://codepen.io/sumitridhal/full/ybVGZa/

computed: {
    availableOptionsPlus: function() {
      this.options.limit.value = this.items.length;
      return this.options.availableOptions.concat({
        id: this.options.availableOptions.length + 1, // counting itself
        name: "All",
        value: this.items.length
      });
    }
  }

Also the watcher for items to set limit.value

 // watch items change 
  watch: {
    items: {
      handler: function(items) {
        this.options.limit.value = items.length;
      },
      deep: true
    }
  }
👤Sumit Ridhal

2👍

UPDATE:
This looks like an exception to the general rule I gave in my original answer (still below). To avoid regenerating the options list every time, you can add a watch that just updates the value of the last item:

  watch: {
    items: {
      handler: function(items) {
        this.options.limit.value = items.length;
      },
      deep: true
    },
    items: function() {
      this.options.availableOptions[this.options.availableOptions.length - 1].value = this.items.length;
    }
  }

Original answer:

As a general rule, anything that gets its value from somewhere else should be a computed. Have a data array of the normal items, then use a computed that returns those plus the length item. Something like:

computed: {
  availableOptionsPlus() {
    return this.availableOptions.concat({
      id: this.availableOptions.length + 1, // counting itself
      name: "All",
      value: this.items.length
    })
  }
}
👤Roy J

Leave a comment