Pass data from plain javascript to vue

Question

I have an app with plain JS and Vue in one file. I need to pass a variable value from JS to Vue. 0. All code in one file:

<script>
plain js
var plainJS = 100;
</script>
<script>
 var app = new Vue({
        el: '#vue-app',
....
</script>

main functionality of the app is on plain js. Vue does a small part with UI.
with js I can catch if one of my elements changed position (a dot on the screen)
I need fire popup(some alert) if checkBox is selected but the Dot wasn't moved.
checkBox is a Vue element
I can pass data from Django to Vue
```
 this.vueVar = {{ djangoVar|safe }}
```

So how to pass

*var plainJS = 100;*

to vue app from plain JS part of the code?

Can you give me a simple way to set vueVar = plainJS?

UPDATE:

function from plain JS

    function isDotMoved(length){
  if(length != 0){ 
    console.log(length)
    return true;
  } 
  return false;
};

so this function works when I grab and move my dot on the screen.

As well, I have a function in Vue part:

isDotsMoved(){
        this.dotMoved = isDotMoved(length); // function from plain JS
        console.log('moved', this.dotMoved)
        if(!this.dotMoved){
          toastr.info('Dot Moved');
        }             
      },

I call this function onClick. It should fire Alert if dots were moved.

I use another function the same way:

    function videoPause() {
       inputVideo.pause();   
   };

And called it inside of my Vue part:

        videoPauseVue() {
          videoPause(); //function from plain JS
        };

How can I do the same for isDotsMoved()?

are you trying to send it to vue during creation or run-time? — Daniel
– Daniel, Commented Jul 8, 2022 at 16:33
var plainJS can change any time, so I suppose it should be "run-time". — Azamat Uzbekov
– Azamat Uzbekov, Commented Jul 8, 2022 at 16:50
I'm also guessing that this is "progressive app", so you're implementing run time (not compiling the vue app) — Daniel
– Daniel, Commented Jul 8, 2022 at 19:29
I think the easiest might be to expose a method through the global window object from the app that will update the internal variable — Daniel
– Daniel, Commented Jul 8, 2022 at 19:31

Cadmus · Accepted Answer · 2022-07-12 08:52:02Z

1

First, i add isDotMoved function in the index.html script tag and declare it on window variable that can access anywhere in your code because it is global scope.

   <script>
      window.plainFunc = (function () {
        return {
          isDotMoved: function (length) {
            if (length != 0) {
              console.log(length);
              return true;
            }
            return false;
          }
        };
      })();
    </script>

Then in vue I access it throught window variable

<template>
  <div id="app">
    <h1>Use Function from plainJS</h1>
    <button @click="handleClick">Click here to invoke function isDotMove from script</script></button>
  </div>
</template>

<script>
function isDotsMoved() {
  let length = 10;
  let dotMoved = window.plainFunc.isDotMoved(length); // function from plain JS
  console.log("moved", dotMoved);
  if (!dotMoved) {
    alert("Dot Moved");
  }
}
export default {
  name: "App",
  methods: {
    handleClick: function () {
      isDotsMoved();
    },
  },
};
</script>

<style>
</style>

Check my example on codebox: https://codesandbox.io/embed/vue-js-font-awesome-1--getting-started-forked-d8xist?fontsize=14&hidenavigation=1&theme=dark

edited Jul 12, 2022 at 8:52

answered Jul 8, 2022 at 17:40

Cadmus

1541 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Azamat Uzbekov Over a year ago

Thanks for the answer. I have only ONE file where plain js and vue are set together in separate <script> tags.

Cadmus Over a year ago

@AzamatUzbekov If you just pass data not listen to change then just set that data in window object like this window.plainJS = 100 than when you want to access it just use like window.plainJS it will return 100. Storge in window object is accessible over all js files that loaded to the browser. If not the method I show you above will still work even if your code is in a separate <script> tags

Azamat Uzbekov Over a year ago

I added a window to var and function but no luck.

Cadmus Over a year ago

@AzamatUzbekov Hi check my edited code to see it fix your problem

Azamat Uzbekov Over a year ago

thank you. I used window.plainJS from your previous comment. it worked.

WillD · Accepted Answer · 2022-07-08 18:56:52Z

0

You can access a ref on the root component if you store a variable of what createApp returns. Then each time you would update your plainJS var, also reassign a matching property (ref) on the "app" object. For the initial value you may use a "root prop" which is the 2nd param of the createApp function.

main.js

import { createApp } from "vue";
import App from "./App.vue";

var plainJS = 100;

const myApp = createApp(App, { plainJS: plainJS }).mount("#app"); 

setInterval(() => {
  //interval used here to simulate a value that changes at arbitrary times
  plainJS++;
  myApp.varFromOutsideVue = plainJS; // 👀 this updates the ref
}, 500);

App.vue

<template>
  <h1>{{ varFromOutsideVue }}</h1>
</template>

<script>
import { onMounted, onUnmounted, ref } from "vue";

export default {
  name: "App",
  props: {
    plainJS: { type: Number },
  },
  setup(props) {
    const varFromOutsideVue = ref(props.plainJS);

    return {
      varFromOutsideVue,
    };
  },
};
</script>

https://codesandbox.io/s/eager-rubin-6fv7p7?file=/src/main.js

edited Jul 8, 2022 at 18:56

answered Jul 8, 2022 at 18:50

WillD

6,8429 gold badges37 silver badges69 bronze badges

3 Comments

Azamat Uzbekov Over a year ago

hi. can you check the updates I added to the question?

WillD Over a year ago

Sorry, your edit is a little vague to me. Could you describe exactly what you are trying to do with isDotMoved (vanila) and isDotMoved (vue) and what error if any you are currently getting? FIrst impressions is you might need to place window. before isDotMoved(length); within your vue app.

Azamat Uzbekov Over a year ago

thank you for your answer. yes, a simple window. helped me. never used it before.

WillD · Accepted Answer · 2022-07-09 15:40:50Z

Another option (see my other answer for a more direct solution) is to use the browser's native event system to "subscribe" to changes to the variable from within your vue app. Each time the value changes you emit a custom event and there is an event listener within your vue app set up to listen to those changes and update a reactive ref.

main.js

import { createApp } from "vue";
import App from "./App.vue";

var plainJS = 100;

function fireVarChangeEvent() {
  const newEvent = new CustomEvent("varchanged", {
    detail: plainJS
  });
  window.dispatchEvent(newEvent);
}

setInterval(() => {
  //interval used here to simulate a value that changes at arbitrary times
  plainJS++;
  fireVarChangeEvent(); // call this function after each time plainJs var is updated
}, 500);

createApp(App, { plainJS: plainJS }).mount("#app"); //pass in the first value of plainJS as a prop, this will not stay reactive, hence the custom event

App.vue

<template>
     <h1>{{ varFromOutsideVue }}</h1>
</template>

<script>
import { onMounted, onUnmounted, ref } from "vue";

export default {
  name: "App",
  props: {
    plainJS: { type: Number },
  },
  setup(props) {
    const varFromOutsideVue = ref(props.plainJS);

    function updateVar(e) {
      varFromOutsideVue.value = e.detail;
    }

    onMounted(() => {
      window.addEventListener("varchanged", updateVar);
    });

    onUnmounted(() => {
      window.removeEventListener("varchanged", updateVar);
    });

    return {
      varFromOutsideVue,
    };
  },
};
</script>

Collectives™ on Stack Overflow

Pass data from plain javascript to vue

3 Answers 3

5 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related