我目前正在使用three.js和開發一個應用程式vue.js。
當我點擊 3D 模型時，會觸發一個函式，其中模型點擊部分的名稱設定在變數“name”中，然后應該由 vue.js 呈現。
在此示例中， “名稱”pageload的inital值會呈現HELLO 。但是當我單擊模型時，變數“名稱”會更新，但vue.js 中的資料變數“屬性”不會更新。
我如何獲得對這個例子的反應？
JavaScript 部分：
var name = "HELLO". //defined as global variable
[...]
// Handling of click event in three.js
if (intersects.length > 0) {for(i = 1; i <= 6; i ) {
if(intersects[ 0 ].object.name == 'K' i ) {
//functions for specific parts are wrapped in an object to enable function call based on variable 'i'
foo['K_' i]('K' i);
}}
var foo = {
K_1: function(i) {
name = "foo_ " i;
},
K_2: function() {},
...
}
vue.js 部分：
const app = Vue.createApp ({
data() {
return {
property: name // object key "property" is set to var "name"
}
},
template:
`<h1> {{ property }} </h1>`
})
app.mount('#app')
uj5u.com熱心網友回復：
要觸發 vue 的反應，您必須使用ref：
const { ref, createApp } = Vue;
var name = ref("HELLO");
var foo = {
K_1(i) {
name.value = "foo_ " i;
},
};
//the vue app:
createApp ({
setup: () => ({ property: name })
template: `<h1> {{ property }} </h1>`
}).mount('#app')
注意：您可以將多個 ref 組合到一個reactive物件中，以減少樣板：
const { reactive, toRefs, createApp } = Vue;
const store = reactive({
name: 'HELLO'
someOtherProp: 'whatever',
yetAnotherReactiveProp: null // you got the picture
})
var foo = {
K_1(i) {
store.name = "foo_ " i;
// ?? no need for `.value` in `reactive`; only in `ref`
},
changeSomeOtherProp(val) {
store.someOtherProp = val;
}
}
createApp ({
setup: () => ({ ...toRefs(store) })
template: `<h1> {{ { name, someOtherProp, yetAnotherReactiveProp } }} </h1>`
}).mount('#app')
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/442947.html
標籤：javascript Vue.js Vue 反应性