2 回答

TA貢獻1794條經驗 獲得超8個贊
如果您在全局可見Drupal.settings.related_products.artiklar對象中有數據,那么您可以在 Vue.js 中以幾乎相同的方式引用它?;蛘呷绻仨毷褂么斯δ?,請將數據分配給全局范圍window.*。
new Vue({
template: `<div>{{foo}} / {{bar}}</div>`,
data() {
return {
foo: Drupal.settings.related_products.artiklar,
bar: window.artiklarData
};
}
}).$mount("#app");
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">Vue App</div>
<script>
// simulate global variable
var Drupal = {
settings: {
related_products: {
artiklar: ['fus', 'ro', 'dah']
}
}
};
(function() {
window.artiklarData = Drupal.settings.related_products.artiklar;
})();
</script>
如果您Drupal.settings.related_products.artiklar在創建Vue對象后分配值,您可以嘗試使用文檔中描述的解決方案,例如
const vm = new Vue({
template: `<div>{{foobar}}</div>`,
data() {
return {
foobar: 'Initial value'
};
}
}).$mount("#app");
setTimeout(() => {
// simulate global variable
var Drupal = {
settings: {
related_products: {
artiklar: 'Changed value'
}
}
};
(function() {
vm.foobar = Drupal.settings.related_products.artiklar;
})();
}, 2000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">Vue App</div>
也許您可以使用 RxJS,但我沒有足夠的知識來判斷它是否正確并舉個例子。

TA貢獻1886條經驗 獲得超2個贊
以防萬一其他人在同樣的事情上苦苦掙扎,我將這個答案發布到我自己的問題中(我不小心用錯誤的帳戶發布了問題)。最后證明 Gander 的回答是正確的,我可以直接在 Vue 組件中訪問該變量,而無需先將其存儲為一個全局變量。不過,查看的結果有點奇怪,經過一些試驗后,我發現我必須使用 JSON.parse() 解析結果。這是現在的工作代碼:
Vue.component('artikel-lista', {
template:`
<ul>
<artikel v-for="artikel in artiklar">{{ artikel.title }} Pris: {{artikel.price}} <a :href="artikel.link" class="button tiny" target="_blank">L?s mer</a></artikel>
</ul>
`,
data(){
return{
artiklar:""
}
},
mounted:function(){
this.artiklar = JSON.parse(Drupal.settings.related_products.artiklar);
console.log(this.artiklar);
}
});
添加回答
舉報