I am currently working on an application with three.js and vue.js.
When I click on the 3D model a function gets triggered where the name of the clicked part of the model is set in the variable "name" which then should be rendered by vue.js.
On pageload the inital value of "name" in this example HELLO gets rendered. But when I click on the model the variable "name" gets updated but not the data variable "property" in vue.js.
How do I get reactivity to this example ?
JavaScript Part :
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 Part :
const app = Vue.createApp ({
data() {
return {
property: name // object key "property" is set to var "name"
}
},
template:
`<h1> {{ property }} </h1>`
})
app.mount('#app')
To trigger vue's reactivity you have to use a 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')
Note: You can group multiple refs into one reactive object, to reduce the boilerplate:
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')