Same Vue.js component in two browser tabs make <select> mirror its selected values

I have a Vue app, using vue-router and a few components rendered in x-templates. In one of those markup templates I have a < select > object. When I open this page in two separate tabs in the same browser session, changed selections in one tab in that is mirrored in the other tab. I first thought it was the data and methods, but then I added a completely vanilla < select > with a few < option > in it, no bindings, data, event handlers or anything - and it behaves the same! When I select an option in one tab, it selects the same in the other. It is the same for other < select > objects in the same app.

I can't explain it. What am I missing? Do I need to maintain sessions to avoid this? If so, how?

Edit: It is now apparent to me that all objects behave the same, and are mirrored between the sessions. This has to be by-design, but how do I do to separate it with a good pattern in Vue.js?

App.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 (pieces)

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];
      },
      .......
    },
.......
}

Answers (1)

AnswerDeveloper

Dec 26, 2022

This issue is likely occurring because the same instance of the Vue app is being used in both tabs. When you make changes in one tab, it is reflected in the other tab because they are using the same instance of the Vue app.

To solve this issue, you can either create a new instance of the Vue app for each tab, or you can use a technique called "namespacing" to separate the data and state for each tab.

To create a new instance of the Vue app for each tab, you can do the following in your App.js file:


const router = new VueRouter({
  mode: 'history',
  base: "/",
  routes: [
    {
      path: '/',
      name: "start",
      component: Start,
    },
    {
      path: '/character/view/:guid',
      name: "character.view",
      component: ViewCharacter,
    }
  ]
})

// create a new instance of the Vue app for each tabnew Vue({
  router,
  el: '#app',
  data: function() {
    return {
      baseUri: "/"
    }
  },
  computed: {
  }
})

To use namespacing, you can create a separate Vuex store for each tab and bind the store to the Vue app instance for that tab. This way, the data and state for each tab will be separate and changes made in one tab will not be reflected in the other tab.

Here is an example of how you can implement namesp