I'm facing an issue where the v-carousel value does not sync correctly with a route parameter using a computed property. Despite waiting for the mounted hook, the carousel seems to emit its own input and disregard the initial value from the route parameter.
For example, when the original route parameter is 1 (/test-route/1), it inexplicably changes to 0 (/test-route/0) after loading.
Is there a way to properly initialize and synchronize the carousel value with a route parameter?
<template>
<v-carousel v-model="ind" >
<v-carousel-item
v-for="(item, i) in images"
:key="i"
>
<v-img :src="item.image_thumb200" />
</v-carousel-item>
</v-carousel>
</template>
<script>
export default {
props: ['images'],
data: ()=>({
// ind: 1,
isMounted: false,
}),
watch: {
"$route.params": {
handler: function(val){
console.log("route",val)
},
deep: true,
}
},
computed: {
ind:{
get(){
console.log('get: ',this.$route.params.id)
return this.$route.params.id
},
set(val){
if(this.isMounted){
console.log('set: ',val)
this.$router.push({params: {id: val}})
}
}
}
},
mounted(){
console.log('mounted')
this.isMounted = true
}
}
</script>
Here's the console output:
get: 1
mounted
set: 0
route {id: 0}
get: 0