Tengo una aplicación con JS simple y Vue en un archivo. Necesito pasar un valor variable de JS a Vue. 0. Todo el código en un archivo:
<script> plain js var plainJS = 100; </script> <script> var app = new Vue({ el: '#vue-app', .... </script>La funcionalidad principal de la aplicación está en js simple. Vue hace una pequeña parte con la interfaz de usuario.
con js puedo detectar si uno de mis elementos cambió de posición (un punto en la pantalla)
Necesito abrir una ventana emergente (alguna alerta) si la casilla de verificación está seleccionada pero el punto no se movió.
checkBox es un elemento Vue
Puedo pasar datos de Django a Vue
this.vueVar = {{ djangoVar|safe }}Entonces como pasar
*var plainJS = 100;*a la aplicación vue desde JS simple parte del código?
¿Puede darme una forma sencilla de configurar vueVar = plainJS ?
Esta es una de las formas en que puede enviar datos de js a un archivo js. En la ventana emergente de su función mainJS, crea una función de recepción que escucha los cambios en el almacenamiento.
$(window).on('storage', event => this.message_receive(this)(event)); message_receive(self) { return function insideFun(ev) { if (ev.originalEvent.key !== 'checkboxFromVue') return; var message = JSON.parse(ev.originalEvent.newValue); if (!message) return; // Handle acction when checkbox is clicked }; }Y en su Vue usa el elemento de conjunto de almacenamiento local con la clave "checkboxFromVue"
localStorage.setItem('checkboxFromVue', valueOfCheckBox));Lo que esto hará es cada vez que su casilla de verificación cambie el valor de almacenamiento local, su js principal conocido y reciba ese valor
Puede acceder a una referencia en el componente raíz si almacena una variable de lo que devuelve createApp . Luego, cada vez que actualice su var plainJS, también reasigne una propiedad coincidente (ref) en el objeto "aplicación". Para el valor inicial, puede usar un "accesorio raíz", que es el segundo parámetro de la función createApp.
principal.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);aplicación.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