gpt4 book ai didi

javascript - 为什么当列表更改时,v-for(使用计算列表)内的组件内的 v-model 会发生奇怪的变化?

转载 作者:行者123 更新时间:2023-12-02 23:31:30 24 4
gpt4 key购买 nike

我正在使用计算列表来显示用于更改数据库中注释的多种表单。 (后端Symfony/api通过axios请求,但不相关)

评论表单本身位于 Vue 组件中。计算列表基于安装页面时加载(并设置为数据属性)的列表,然后通过计算属性中的输入搜索框进行过滤。

现在,当我在输入框中输入不同的内容并且评论组件更新时,v-model 和标签就会变得困惑。

我在多个浏览器中进行了测试,主要浏览器中的行为是相同的。

我也搜索过文档,但没有找到解决方案。

重现行为的示例:

<!DOCTYPE html>
<html>
<div id="app"></app>
</html>
const ChangeCommentForm = {
name: 'ChangeCommentForm',
props: ['comment', 'id'],
data() {
return {
c: this.comment,
disabled: false
};
},
template: `
<form>
<div>{{ comment }}</div>
<input :disabled="disabled" type="text" v-model="c">
<button type="submit" @click.prevent="changeComment">
Change my comment
</button>
</form>
`,
methods: {
changeComment() {
this.disabled = true;
// do the actual api request (should be unrelated)
// await api.changeCommentOfFruit(this.id, this.c),
// replacing this with a timeout for this example
window.setTimeout(() => this.disabled = false, 1000);
}
}
};

const App = {
components: {ChangeCommentForm},
data() {
return {
fruits: [
{id: 1, text: "apple"},
{id: 2, text: "banana"},
{id: 3, text: "peach"},
{id: 4, text: "blueberry"},
{id: 5, text: "blackberry"},
{id: 6, text: "mango"},
{id: 7, text: "watermelon"},
],
search: ''
}
},
computed: {
fruitsFiltered() {

if (!this.search || this.search === "")
return this.fruits;

const r = [];
for (const v of this.fruits)
if (v.text.includes(this.search))
r.push(v);
return r;
}
},
template: `
<div>
<form><input type="search" v-model="search"></form>
<div v-for="s in fruitsFiltered">
<ChangeCommentForm :id="s.id" :comment="s.text"/>
</div>
</div>
`
};

const vue = new Vue({
el: '#app',
components: {App},
template: '<app/>'
});

只需在搜索框中输入一些字母codepen 上的示例:https://codepen.io/anon/pen/KLLYmq

现在,如示例所示,CommentChangeForm 中的 div 已正确更新,但 v 模型已损坏。

我想知道我是否错过了什么,或者这是 Vue 中的一个错误?

最佳答案

为了在渲染之间保留 DOM 元素的状态,v-for 元素还具有 key 属性,这一点很重要。此键应在渲染之间保持一致。

这里看起来以下内容可能会起作用:

<div v-for="s in fruitsFiltered" :key="s.id">
<ChangeCommentForm :id="s.id" :comment="s.text"/>
</div>

参见:

https://v2.vuejs.org/v2/guide/list.html#Maintaining-State

https://v2.vuejs.org/v2/api/#key

关于javascript - 为什么当列表更改时,v-for(使用计算列表)内的组件内的 v-model 会发生奇怪的变化?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56478801/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com