避免直接改变 prop，因为值会被覆盖 [英] Avoid mutating a prop directly since the value will be overwritten

问题描述

我在升级到 Vue 2.0 时遇到非常普遍的问题

我收到警告:

<块引用>

避免直接改变 prop，因为值会被覆盖每当父组件重新渲染时.相反，使用数据或基于 prop 的值计算的属性.正在变异的道具:用户名"(在组件中找到)

我多次阅读文档，但我仍然不明白如何修复它.

username 和 password 在主 Vue 应用程序中声明.

这是我的代码:

var GuestMenu = Vue.extend({道具:['用户名'，'密码']，模板:`<div id="身份验证"><form class="form-inline pull-right"><div class="form-group"><label class="sr-only" for="UserName">用户名</label><input type="username" v-model="username" class="form-control" id="UserName" placeholder="username">

<div class="form-group"><label class="sr-only" for="Password">Password</label><input type="password" v-model="password" class="form-control" id="Password" placeholder="密码">

</表单></div>`,});

App = new Vue ({el: '#app',数据:{topMenuView: "客人菜单",contentView: "访客内容",用户名: ""，密码: ""，}})

我尝试了 v-bind 但它似乎不起作用，我不明白为什么.它应该将值绑定到父级(主要的 Vue 应用程序)

解决方案

从 Vue 2.3.0 开始，您可以使用 .sync 修饰符:

示例来自 https://vuejs.org/v2/指南/components-custom-events.html#sync-Modifier:

并在您的控制器中...

this.$emit('update:title', newTitle)

I have very common problem with upgrading to Vue 2.0

I am getting warning:

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "username" (found in the component )

I read the documentation many times but I still can't understand how to fix it.

username and password are declared in the main Vue app.

Here is my code:

var GuestMenu = Vue.extend({
   props : ['username', 'password'],
      template: `
        <div id="auth">
            <form class="form-inline pull-right">
                <div class="form-group">
                    <label class="sr-only" for="UserName">User name</label>
                  <input type="username" v-model="username" class="form-control" id="UserName" placeholder="username">
                </div>
                <div class="form-group">
                  <label class="sr-only" for="Password">Password</label>
                  <input type="password" v-model="password" class="form-control" id="Password" placeholder="Password">
                </div>
            </form>
        </div>`,
    });

 

App = new Vue ({ 
   el: '#app',
  data: 
    {
      topMenuView: "guestmenu",
      contentView: "guestcontent",
      username: "",
      password: "",

    }
})

I tried v-bind but it does not seem to work, and I can't understand why. It should bind the value to parent (the main Vue app)

解决方案

From Vue 2.3.0 on you can use the .sync modifier:

Sample from https://vuejs.org/v2/guide/components-custom-events.html#sync-Modifier:

<text-document :title.sync="title"></text-document>

and in your controller...

this.$emit('update:title', newTitle)

这篇关于避免直接改变 prop，因为值会被覆盖的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！