CODEWITHSUNDEEP
javascriptvue.jsvuejs2
Penny
Penny

Reputation: 164

how to add a string to another string in Vue.js

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'

Upvotes: 1

Views: 818

Answers (2)

Majed Badawi
Majed Badawi

Reputation: 28404

You shouldn't mutate props, one way to do this is to create a computed property:

computed: {
  formattedLink: function() {
    return this.link + '/';
  }
}

Upvotes: 1

Humayon Zafar
Humayon Zafar

Reputation: 1141

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

Upvotes: 1

Related Questions