Vue3：未捕获类型错误：代理上的“set”：trap为属性'NewTodo'返回了错误

jhkqcmku 于 2023-05-18 发布在 Vue.js

关注(0)|答案(3)|浏览(577)

我收到一条错误消息：Uncaught TypeError：代理上的“set”：trap为属性“NewTodo”返回false
当我试图重置子组件（FormAddTodo.vue）中的输入文本值时，会出现该错误。

App.vue：

export default {
  data(){
    return{
      todos: [],
      newTodo: ""
    }
  },
  components: {
    Todos,
    FormAddTodo
  }
}
</script>

<template>
  <div class="container mx-auto">
      <Todos :todos="todos" />
      <div class="py-8"></div>
      <FormAddTodo :NewTodo="newTodo" :Todos="todos" />
  </div>
</template>

FormAddTodo.vue：

<template>
    <div class="formAddTodo">
        <form @submit.prevent="handleAddTodo" class="addTodo">
            <input type="text" class="" placeholder="type new todo here..." v-model="NewTodo">
        </form>
    </div>
</template>

<script>
    export default {
        props: ['NewTodo', 'Todos'],
        methods: {
            handleAddTodo(){
                const colors = ["cyan", "blue", "indigo", "pink"]
                const todo = {
                    id: Math.random(),
                    content: this.NewTodo,
                    color: colors[Math.floor(Math.random() * ((colors.length-1) - 0 + 1) + 0)]
                }

                this.Todos.push(todo)
                this.NewTodo = '' // this line throw the error
            }
        }
    }
</script>

vue.js

来源：https://stackoverflow.com/questions/70648897/vue3-uncaught-typeerror-set-on-proxy-trap-returned-falsish-for-property-ne

3条答案

按热度按时间

yvt65v4c1#

您正在使用v-model="NewTodo"，其中NewTodo是组件的props。
小 prop 不能从孩子身上换下来。
使用不同的v-model变量，这将为您工作。

赞(0）回复(0）举报 2023-05-18

iecba09b2#

我遇到过其他情况。这是给其他人在使用this.$refs.componentName.propertyname = value;时遇到的问题Uncaught TypeError: 'set' on proxy: trap returned falsish for property xxxxxx的一个说明。为了解决这个问题，你可以使用一个变量来代替。
举个例子

<component-name :propertyname="variableA">

<script>
export default =  {
         components: {
              componentName,
         },    
         data() {
              variableA: 'default',
         },
         methods: {
              changeValue(){
                   this.variableA = 'I_am_a_newValue';
              },
         },
    }
</script>

赞(0）回复(0）举报 2023-05-18

ifmq2ha23#

有时这个问题可能会由于state、getter、action中的名称相同而发生。在我的例子中，它是this.app（state）和app（getter）。当我将state属性重命名为this._app时，问题就消失了。

P.S.：删除getter 'app'是一个 * 更优雅 * 的解决方案（在我的情况下）。getter类似于computed，它们只有在返回状态的修改版本时才有用。

赞(0）回复(0）举报 2023-05-18