Update array properties dynamically in Vue 3 composition API when route param changes

Question

My component (Vue 3 with composition API + script setup) has a property linkList. This shall be updated whenever the route param id changes.

Example

When calling this component on /user/1, then linkList shall look like this:

{id: 1, name: 'foo'},
{id: 1, name: 'bar'}

This is my current code:

<script setup>

const route = useRoute();
const idRouteParam = computed(() => route.params.id);

const linkList = [
{
  id: idRouteParam,
  name: 'foo',
},
{
  id: idRouteParam,
  name: 'bar',
}
];

watch(
  idRouteParam,
  () => {
    console.log(idRouteParam);
  },
  { immediate: true },
);

</script>

The problem is: linkList is only updated after the page is refreshed, i.e. the component is re-created. When idRouteParam changes (example: /user/2), then linkList has the original values from user 1. I thought that I could update it in the watcher but I guess I'm missing some piece of the puzzle.

Boussadjra Brahim · Accepted Answer · 2022-08-23 09:33:12Z

1

The linkList should be also defined as a computed property :

const linkList = computed(()=>[
{
  id: idRouteParam,
  name: 'foo',
},
{
  id: idRouteParam,
  name: 'bar',
}
]);

answered Aug 23, 2022 at 9:33

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Robert Strauch Over a year ago

OMG, sure... sometimes I'm thinking way too complicated 😂

Boussadjra Brahim Over a year ago

sure, if a reactive property X is used as dependency in Y, Y should be a computed property

Collectives™ on Stack Overflow

Update array properties dynamically in Vue 3 composition API when route param changes

Example

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Example

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related