[Vuejs]-Content from async XML source doesn't get updated correctly in vue component

by

2👍

Your data property is not reactive as it refer to a primitive type. It will indeed not be updated after the created step.
If you want it to be reactive, make it computed instead:

Vue.component('edit-element', {
  template: `
  <div>
    <span v-html="direct ? xmlNode.firstChild.nodeValue : value"></span>
    <span style="font-size: 60%; color:grey">({{ keyVal }})</span>
  </div>`,
  props: ["xmlNode", "keyVal", "direct"],
  computed: {
    value() {
        return this.xmlNode.firstChild.nodeValue;
    }
  }
});

See working fiddle: https://jsfiddle.net/56c7utvc/

👤FitzFish

Leave a comment