Question

我正在使用vueJs和laravel开发我的第一个应用程序。现在我对v-model有疑问。我有一个包含 Person 组件的页面，用于编辑或创建新Person。所以我从laravel或模型人或新人那里得到我的后端。

现在在我的前端，我通过props将数据传递给组件：

Page.blade.php

<Person :person-data="{!! jsonToProp($person) !!}"></Person>

（来自json后端的jsonToProp转换模型）在这种情况下，我会返回新模型，因此没有属性，因此 $ person 将是一个空对象。

Person.vue

<template>
<div>
    <label for="name_p"> Name</label>
    <input id="name_p" v-model="person.name" class="form-control" />
    <button v-on:click="test()">test</button>
    {{person.name}}
</div>
</template>
<script>
  export default {
        props: ['personData'],
        mounted() {
        },
        data() {
            return {
                person: this.personData
            }
        },
        methods:{
          test(){
             console.log(this.person.name);
          }
        }

    }
</script>

现在，如果我使用模型v-model="person.name"更改输入，我会在模板中打印名称但不会更改。但是，如果我单击buttonit控制台写入正确的值。所以我读到更改模型值是异步的，那么在更改输入时如何呈现新模型？

Answer 1

根据documentation：

，您应该预先声明所有属性

为什么DOM不更新？

大多数情况下，当您更改Vue实例的数据时，视图会更新。但有两个边缘情况：



当添加新属性时，观察到数据时不存在。由于ES5的限制并且为了确保跨浏览器的一致行为，Vue.js无法检测属性添加/删除。最佳实践是始终声明需要在前期进行反应的属性。如果您绝对需要在运行时添加或删除属性，请使用全局Vue.set或Vue.delete方法。



通过直接设置索引（例如arr[0] = val）或修改其length属性来修改数组。同样，Vue.js无法获取这些更改。始终使用Array实例方法修改数组，或者完全替换它。 Vue提供了一种方便的方法arr.$set(index, value)，它只是arr.splice(index, 1, value)的语法糖。

Answer 2

这可能是因为来自jsonToProp($person)的数据不会被动反应。你看，vue修改每个对象使其“反应”，有时你需要自己修改它。 detection caveats 尝试在挂钩中执行this.person = Object.assign({}, this.person, this.personData)，以使其反应。

更新模板，其中模型已从输入vueJS更改

2 个答案: