javascript - How can I change the value of props in vue with a method in a component? - Stack Overflow

admin管理员组

文章数量:1394518

iam practising vuejs transfering data between ponents and this is my code

My blade template:

  `<app-user-details :name="name"></app-user-details>`

Then in my Child-Component:

<template>
   <div>
       <h4>You may view the user details here</h4>
       <p>Many Details</p>
       <p>User name: {{ name }}</p>
       <button @click="resetName">reset name</button>
   </div>
</template>

<script>
export default {
   name: 'app-user-datails',
   props: {
       name: {
           type: String
       }
   },
   methods: {
       resetName() {
        return  this.name = 'Max'
       }
   }
}
</script>

i want to change the name in props by the method resetName() but in the console i get this error

vue.js:1355 Uncaught TypeError: 'set' on proxy: trap returned falsish for property 'name'

what should i do?!

iam practising vuejs transfering data between ponents and this is my code

My blade template:

  `<app-user-details :name="name"></app-user-details>`

Then in my Child-Component:

<template>
   <div>
       <h4>You may view the user details here</h4>
       <p>Many Details</p>
       <p>User name: {{ name }}</p>
       <button @click="resetName">reset name</button>
   </div>
</template>

<script>
export default {
   name: 'app-user-datails',
   props: {
       name: {
           type: String
       }
   },
   methods: {
       resetName() {
        return  this.name = 'Max'
       }
   }
}
</script>

i want to change the name in props by the method resetName() but in the console i get this error

vue.js:1355 Uncaught TypeError: 'set' on proxy: trap returned falsish for property 'name'

what should i do?!

• javascript
• vue.js
• vue-ponent

Share Improve this question Follow asked Nov 20, 2020 at 14:07 Mohamed MamdohMohamed Mamdoh 6111 silver badge22 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

You should not try to update a prop for inside a child ponent, from the 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 ponents from accidentally mutating the parent’s state, which can make your app’s data flow harder to understand.

However, you can emit an event with the new name from the child ponent :

  resetName() {
   this.$emit('updateName', 'Max')
  }

And update it from the parent by listening to the event:

 <app-user-details :name="name" @updateName="name = $event"></app-user-details>

本文标签： javascriptHow can I change the value of props in vue with a method in a componentStack Overflow