Question

我在vue中反应过度，需要一些帮助。

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

如果我使用data属性设置内容，则只会发生这种情况。

<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

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

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/

来自异步XML源的内容无法在vue组件

1 个答案: