[Vuejs]-Vue Dynamic component is not been re rendered

by

2👍

✅

If you want to get updates for the options prop in order to re-render your component when options changes, you should use a computed attribute for optionsForSelect instead of a data one. When using data the value gets copied in the component and will only get re-rendered when the data attribute is changed locally.

If you use a computed property, when the parent component changes the prop options value, the computed attribute will get re-evaluated and your component will render again.

computed: {
   optionsForSelect() {
       if (typeof option === 'string') {
           return { value: option, text: option }
       } else {
          return {value: option[valueMethod], text: option[textMethod]}
       }
   }
}

The computed property would be my preferred approach.

However, you can also accomplish this with the data attribute you have. You would have to add a watcher for the options prop and assign the new value each time the prop is updated to optionsForSelect data attribute.

watch: {
    options: function(newVal, oldVal) {
        // Update this.optionsForSelect value here
   }
}

Hope it helps.

👤Andres

1👍

Once that have entered the WATCH function, you can update the select-input view with this.$forceUpdate().

watch: {
  options: function(newVal, oldVal) { // [{id: '2', text: 'test2'}]
    // console.log('Prop changed: ', newVal, ' | was: ', oldVal)
    this.$forceUpdate()
  }
}
👤javimovi

Leave a comment