Estoy trabajando en un sitio creado con plantillas de PHP y jQuery, con una tabla representada con Vue:
let vuetablecomponent= new Vue({ components: { ManualTable }, }).$mount('[data-vue-app=manualtable]');Necesito poder manipular el estado de la tabla Vue desde el exterior. Actualmente estoy manipulando los accesorios directamente usando JS, así:
vuetablecomponent.$children[0].aprop = 'propvalue'Y, por supuesto, recibí una advertencia de Vue:
Evite mutar un accesorio directamente, ya que el valor se sobrescribirá cada vez que se vuelva a renderizar el componente principal. En su lugar, utilice una propiedad calculada o de datos basada en el valor de la propiedad.
Técnicamente, esto no debería ser un problema, ya que el componente principal no es un componente de Vue, y quiero que se sobrescriba el valor si PHP vuelve a representar la página. Pero me pregunto si hay una forma más... adecuada de hacer esto.
¿Cómo renderizas el componente y pasas el accesorio al componente en el primer renderizado?
Ya sea que use plantillas PHP o HTML simple, aún debe inicializar la aplicación Vue de alguna manera porque, de lo contrario, ¿cómo sabría el navegador cómo cargar un componente Vue?
O bien hiciste:
--- init-app.js -- new Vue({ el: '#app', render: h => h(App) }) -- App.vue -- <template> <MyTableComponent :a-prop="tableProp" /> </template> <script> export default { data() { return { tableProp: "123-abc", }; }, } </script>Si lo anterior es el caso, simplemente cree una referencia a este componente de la siguiente manera:
mounted() { window.__APP__ = this } luego actualice tableProp donde quiera haciendo window.__APP__.tableProp = "new-value"
--- index.php --- <?php <html> <body> <div id="app"> <MyTableComponent :a-prop="tableProp"></MyTableComponent> </div> </body> </html> ?> new Vue({ el: "#app", component: { MyTableComponent, }, data: { tableProp: "123-abc", } })Si este es el caso, simplemente cree una referencia a la aplicación de esta manera:
window.__APP__ = new Vue({})asegúrese de que Vue se cargue primero antes de su secuencia de comandos que actualiza este accesorio para que la variable esté realmente configurada.