Tengo una aplicación Vue, uso vue-router y algunos componentes renderizados en x-templates. En una de esas plantillas de marcado, tengo un objeto <seleccionar>. Cuando abro esta página en dos pestañas separadas en la misma sesión del navegador, cambié las selecciones en una pestaña que se refleja en la otra pestaña. Primero pensé que eran los datos y los métodos, pero luego agregué un <select> completamente vainilla con algunas <opciones> en él, sin enlaces, datos, controladores de eventos ni nada, ¡y se comporta de la misma manera! Cuando selecciono una opción en una pestaña, selecciona lo mismo en la otra. Es lo mismo para otros objetos < select > en la misma aplicación.
No puedo explicarlo. ¿Qué me estoy perdiendo? ¿Necesito mantener sesiones para evitar esto? ¿Si es así, cómo?
Editar: ahora me resulta evidente que todos los objetos se comportan de la misma manera y se reflejan entre las sesiones. Esto tiene que ser por diseño, pero ¿cómo hago para separarlo con un buen patrón en Vue.js?
Aplicación.js
Vue.use(VueRouter) const router = new VueRouter({ mode: 'history', base: "/", routes: [ { path: '/', name: "start", component: Start, }, { path: '/character/view/:guid', name: "character.view", component: ViewCharacter, } ] }) new Vue({ router, el: '#app', data: function() { return { baseUri: "/" } }, computed: { } })HTML
<html> .... <script type="text/x-template" id="template-character-sheet"> <div> <select> <option>1</option> <option>2</option> </select> </script> ... <script src="/components/ViewCharacter.js"></script> <script src="/components/App.js"></script> ... </html>ViewCharacter.js (piezas)
const ViewCharacter = { template: "#template-character-sheet", components: { "navigation": Navigation }, data: function() { return { properties: values, ....... } }, computed: { current_stability: function() { return this.rules.stability_levels.filter(o => o.level == this.character.stability)[0]; }, ....... }, ....... }[No probado]
Creo que su problema es tener la misma :key en ambos <select> , intente agregar una clave generada para resolver el problema.
Documentos: https://v3.vuejs.org/guide/migration/key-attribute.html
Fusión cerebral. Me estaba olvidando de que la sincronización del navegador se estaba ejecutando en la cadena de herramientas para servir el contenido. Cambiado para servir, y el problema obviamente desapareció.