来自异步 XML 源的内容未在 vue 组件中正确更新

Question

我正在努力应对 vue 的反应性问题，需要一些帮助。

我的组件应该显示来自 XML 文档的内容。在不同的 XML 文档之间切换时，某些组件会保留其旧值并且不反映新内容。这似乎发生在具有相同 id 的 XML 元素上。但是我在 v-for 循环中使用了一个唯一的 :key 属性，该属性由 XML 文档 id 和 XML 元素 id 组成。

只有在我使用数据属性设置内容时才会发生这种情况。

<span v-html="value"></span>
...
data() {
  return {
    value: this.xmlNode.firstChild.nodeValue
  };
}

当我直接设置内容时，它按预期工作。

<span v-html="xmlNode.firstChild.nodeValue"></span>

HTML

<div id="course">
  <button @click="toggle">Change content</button>
  <edit-element
    v-for="node in courseElementContent"
    :xml-node="node"
    :key="id + '#' + node.getAttribute('idref')"></edit-element>
</div>

JavaScript：

Vue.component('edit-element', {
  template: '<div><span v-html="value"></span></div>',
  props: ["xmlNode"],
  data() {
    return {
      value: this.xmlNode.firstChild.nodeValue
    };
  }
});

new Vue({
  el: "#course",
  name: "CourseElement",
  data: {
      id: 1,
      courseElementContent: null
  },
  created() {
    this.load();
  },

  methods: {
    toggle() {
      if (this.id == 1) this.id = 2;
      else this.id = 1;
      this.load();
    },
    load() {
      var me = this;
      axios.get("content/" + this.id + ".xml").then(
        response => {
          var doc = new DOMParser().parseFromString(response.data, "text/xml"));
          // get all <content> elements
          me.courseElementContent = doc.querySelectorAll("content");
      });
    }
  }
});

我错过了什么？应该更改什么以始终反映正确的值？ （注意：我想使用引用数据属性，只需通过设置即可轻松更改“值”。）

感谢赐教。

我的互动小提琴 https://jsfiddle.net/tvjquwmn/

Answer 1

您的 data 属性不是响应式的，因为它引用原始类型。在创建步骤之后它确实不会更新。 如果您希望它具有反应性，请改为计算：

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;
    }
  }
});

查看工作小提琴：https://jsfiddle.net/56c7utvc/