使用从输入 vueJS 更改的模型更新模板

Posted 2023-02-16

【中文标题】使用从输入 vueJS 更改的模型更新模板

【英文标题】：Update template with model changed from input vueJS

【发布时间】：2018-01-03 10:31:34

【问题描述】：

我正在使用 vueJs 和 laravel 开发我的第一个应用程序。 现在我对v-model 有疑问。 我有一个带有组件 Person 的页面，可以编辑或创建新的 Person。 所以我从 laravel 或 Model Person 或 new Person 的后端获取。

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

Page.blade.php

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

(jsonToProp 转换模型来自 json 后端) 在这种情况下，我会返回没有属性的新模型，所以 $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 控制台写入正确的值。 所以我读到更改模型值是异步的，那么当更改输入时如何渲染新模型？

【问题讨论】：

我建议您在created 中检查以确保您需要 的所有属性都在personData 对象上，并且如果不是，使用$set初始化它们。

谢谢，但这意味着如果我有 30 个属性，我应该在创建时声明 30 个属性？ ://

问题是您正在向空对象动态添加属性。您可以从已经具有这些属性的对象开始，或者如果您希望它们具有反应性，则可以正确添加它们。

好的，我明白了！谢谢！现在它可以工作了，我已经从后端创建了我的对象，并且在前端我已经拥有了正确的反应属性。谢谢！

【参考方案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) 的语法糖。

【讨论】：

谢谢，但这意味着如果我有 30 个属性，我应该在创建时声明 30 个属性？ :/ –

你可以看看here。您可以将$set 或Object.assign 与新对象一起使用。

是的，我看到了，问题是我不会在前端手动重建对象，但我已经用后端解决了，现在它可以工作了。谢谢你的参考！

只是一个友好的提醒，Nora，即使您链接到文档（并且此类链接较少可能会腐烂），始终建议您在 Stack Overflow 上@ 987654323@。我已经在这里为你做了这个，以响应一个标志。

【参考方案2】：

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

【讨论】：

这是正确的想法，但如果this.personData 如问题所暗示的那样是一个空对象，那将无济于事。