Two different routes using the same child components are evaluating data differently

Using Vue3 and vue-router4, two different components share the same child components. The component templates are setup as follows:

<!-- Component A -->  <template>    <ComponentA>      <Child>        <Grandchild />      </Child>    </ComponentA>  </template>    <!-- Component B -->  <template>    <ComponentB>      <Child>        <Grandchild />      </Child>    </ComponentB>  </template>

These are the configured routes:

const routes = [      {          path:'/componenta/:param',          component: ComponentA      },      {          path:'/componentb',          component: ComponentB      }  ]    const router = createRouter({      history: createWebHistory(),      routes,  })

Some data is setup in the Child component:

export default {    name: 'Child'    ...,    data() {      return {        filters: {          size: [            {              selected: this.$route.query.size === "1m"            }          ]        }      }    }  }

The above aims to set selected to true or false depending on whether a match is found in the route. The results is then passed into Grandchild as a prop:

<!-- Component A -->  <template>    <ComponentA>      <Child>        <Grandchild :filters="filters" />      </Child>    </ComponentA>  </template>    <!-- Component B -->  <template>    <ComponentB>      <Child>        <Grandchild :filters="filters" />      </Child>    </ComponentB>  </template>

With the above, the value of selected in the filter data is evaluated and the intended result is that when the components load, the filters in the $route are set to true in the data.

The problem is, where the child components of ComponentA and ComponentB are identical:

• ComponentA does not work as intended, where matches found in the route are not set to true in the filters data.
• ComponentB does work as intended, where matches found in the route are set to true in the filters data.

https://stackoverflow.com/questions/66774083/two-different-routes-using-the-same-child-components-are-evaluating-data-differe March 24, 2021 at 10:53AM