How to sync vue.js data to global javscript variable

Question

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')

It's unclear for me what you want to achieve ? Can you please elaborate the problem statement. How you want to update the name property in vue.js ? — Rohìt Jíndal
– Rohìt Jíndal, Commented Mar 13, 2022 at 15:14
@Creative Learner: There is a 3D model with different parts. By handling the on-click event the name of the clicked portion is returned and a specific function is called based on the name. In the specific function a variable is set to the name from the on-click event. This variable should be in-sync with vue.js so the name of the clicked portion is shown in the DOM. Is the problem statement more clear? - Based on that i would edit my quesetion so it is more useful for other users. The answer from tao do the trick to what i want to achieve. — m_s
– m_s, Commented Mar 13, 2022 at 17:00

tao · Accepted Answer · 2022-03-13 15:48:56Z

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')

Collectives™ on Stack Overflow

How to sync vue.js data to global javscript variable

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related