來自異步XML源的內容在vue組件中沒有得到正確更新

在vue中充滿了反應性，需要一些幫助。來自異步XML源的內容在vue組件中沒有得到正確更新

我的組件應該顯示來自XML文檔的內容。在不同的XML文檔之間切換時，一些組件保留其舊值，並不反映新內容。這似乎發生在具有相同ID的XML元素上。但是，我在v-for循環中使用unique：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/

來源

2017-06-20 kirschkern

你的數據屬性不反應。它確實不會在創建的步驟後更新。如果你希望它是被動的，讓它代替計算：

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/

來源

2017-06-20 10:14:33 Cobaltway

謝謝你的回答快和工作的例子。我仍然不完全理解它。我希望能夠在後面的步驟中改變這個值。怎麼做？ – kirschkern

您的data（）函數僅在創建組件時運行一次。它不會在下一個渲染步驟中重新運行，所以它們將保持靜態，除非它們被明確更新。另一方面，計算出來的屬性是被動的，並且會監視它們依賴關係的變化。 – Cobaltway

這是有道理的。但我沒有得到它，因爲我使用了一個獨特的：關鍵屬性，恕我直言，它會導致一個明確的更新。我希望能夠在後面的步驟中改變這個價值？你有什麼建議？ – kirschkern

來自異步XML源的內容在vue組件中沒有得到正確更新

回答

相關問題