vueコンポーネント内で非同期XMLソースのコンテンツが正しく更新されない

Question

vueの反応性に苦しんでいて、助けが必要です。

私のコンポーネントは、XMLドキュメントのコンテンツを表示する必要があります。異なるXMLドキュメントを切り替えるとき、一部のコンポーネントは古い値を保持し、新しいコンテンツを反映しません。これは、同じidを持つXML要素で発生すると思われます。しかし、私は、XML文書のidとXML要素のidからなるv-forループのunique：key属性を使用します。

これは、データプロパティを使用してコンテンツを設定した場合にのみ発生します。

<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

あなたのデータプロパティは反応しません。実際には、作成されたステップの後では更新されません。 あなたはそれが反応するようにしたい場合は、代わりに計算します：速い答えと作業例えばhttps://jsfiddle.net/56c7utvc/