Vue.js 来自异步XML源的内容不'；无法在vue组件中正确更新

我在vue中挣扎，需要一些帮助

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

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

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

...
数据（）{
返回{
值：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");
      });
    }
  }
});

Vue.component（'edit-element'）{
模板：“”，
道具：[“xmlNode”]，
数据（）{
返回{
值：this.xmlNode.firstChild.nodeValue
};
}
});
新Vue({
el:“当然”，
名称：“课程元素”，
数据：{
id:1，
courseElementContent:空
},
创建（）{
这个.load（）；
},
方法：{
切换（）{
如果（this.id==1）this.id=2；
否则，这个.id=1；
这个.load（）；
},
加载（）{
var me=这个；
get（“content/”+this.id+“.xml”）。然后(
响应=>{
var doc=new DOMParser（）.parseFromString（response.data，“text/xml”）；
//获取所有元素
me.courseElementContent=doc.queryselectoral（“内容”）；
});
}
}
});

我错过了什么？应更改哪些内容以始终反映正确的值？（注意：我想使用references数据属性来轻松更改“value”，只需设置它即可。）

谢谢你的启发

我的互动小提琴

---

您的数据属性不是被动的，因为它引用的是基元类型。在创建步骤之后，它确实不会被更新。 如果您希望它是反应式的，请改为计算：

Vue.component（'edit-element'）{
模板：`
（{{keyVal}}）
`,
道具：[“xmlNode”、“keyVal”、“direct”]，
计算：{
值（）{
返回this.xmlNode.firstChild.nodeValue；
}
}
});

---

请参阅working fiddle:

您的数据属性不是被动的，因为它引用的是基元类型。在创建步骤之后，它确实不会被更新。 如果您希望它是反应式的，请改为计算：

Vue.component（'edit-element'）{
模板：`
（{{keyVal}}）
`,
道具：[“xmlNode”、“keyVal”、“direct”]，
计算：{
值（）{
返回this.xmlNode.firstChild.nodeValue；
}
}
});

---

请参阅工作小提琴：

感谢您的快速回答和工作示例。我还是不完全明白。我希望能够在以后的步骤中更改该值。如何操作？创建组件时，data（）函数只运行一次。它不会在下一个渲染步骤中重新运行，因此它们将保持静态，除非它们被显式更新。另一方面，计算属性是反应性的，将监视其依赖项的更改。这是有意义的。但我不明白，因为我使用了一个惟一的：key属性，我认为它应该导致显式更新。我希望能够在以后的步骤中更改该值？你的建议是什么？它与：key无关。问题是

this.xmlNode.firstChild.nodeValue

是一个原始值。因此，当您将其分配给数据函数中的

value

时（仅运行一次），它不会作为引用传递，而是被复制（不再是同一个实体）。然后，复制的值由要监视的vue代理。但原始财产并非如此。因此，

data.value

虽然本身是被动的，但不会对

firstChild.nodeValue

上的更改做出反应，因为您的

data.value

没有以任何方式链接到

firstChild.nodeValue

，它们是完全分开的。我明白了！非常感谢你的解释。我认为将根据：key属性创建一个新组件。然后我真的不明白：钥匙是用来做什么的。谢谢你的快速回答和工作示例。我还是不完全明白。我希望能够在以后的步骤中更改该值。如何操作？创建组件时，data（）函数只运行一次。它不会在下一个渲染步骤中重新运行，因此它们将保持静态，除非它们被显式更新。另一方面，计算属性是反应性的，将监视其依赖项的更改。这是有意义的。但我不明白，因为我使用了一个惟一的：key属性，我认为它应该导致显式更新。我希望能够在以后的步骤中更改该值？你的建议是什么？它与：key无关。问题是

this.xmlNode.firstChild.nodeValue

是一个原始值。因此，当您将其分配给数据函数中的

value

时（仅运行一次），它不会作为引用传递，而是被复制（不再是同一个实体）。然后，复制的值由要监视的vue代理。但原始财产并非如此。因此，

data.value

虽然本身是被动的，但不会对

firstChild.nodeValue

上的更改做出反应，因为您的

data.value

没有以任何方式链接到

firstChild.nodeValue

，它们是完全分开的。我明白了！非常感谢你的解释。我认为将根据：key属性创建一个新组件。我真的不明白：钥匙是用来做什么的。