I am working on a Vue project. I tried to add a character to a prop using this code:
mounted() {
this.link = this.link + '/';
}
the problem is that I getting this error on the console:
Uncaught TypeError: 'set' on proxy: trap returned falsish for property 'link'
You shouldn't mutate props, one way to do this is to create a computed property:
computed: {
formattedLink: function() {
return this.link + '/';
}
}
From the Vue docs:
All props form a one-way-down binding between the child property and the parent one: when the parent property updates, it will flow down to the child, but not the other way around. This prevents child components from accidentally mutating the parent's state, which can make your app's data flow harder to understand.
You can emit the data from the child component and then listen for it in the parent component for any changes to keep the data in sync.
<child-component :link="value" @updatedLink="link = $event"></child-component>
From the child just emit the updated value.
mounted() {
const val = this.link + '/';
this.$emit('updatedLink', val)
}
You can read more about it here: https://v3.vuejs.org/guide/component-custom-events.html