- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用计算列表来显示用于更改数据库中注释的多种表单。 (后端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>
参见:
关于javascript - 为什么当列表更改时,v-for(使用计算列表)内的组件内的 v-model 会发生奇怪的变化?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56478801/
我对 mongoosejs 中模型的使用感到有些困惑。 可以通过这些方式使用 mongoose 创建模型 使用 Mongoose var mongoose = require('mongoose');
我正在看 from django.db import models class Publisher(models.Model): name = models.CharField(max_len
我有自己的 html 帮助器扩展,我用这种方式 model.Reason_ID, Register.PurchaseReason) %> 这样声明的。 public static MvcHtmlS
假设模型原本是存储在CPU上的,然后我想把它移到GPU0上,那么我可以这样做: device = torch.device('cuda:0') model = model.to(device) # o
我过去读过一些关于模型的 MVC 建议,指出不应为域和 View 重用相同的模型对象;但我找不到任何人愿意讨论为什么这很糟糕。 我认为创建两个单独的模型 - 一个用于域,一个用于 View - 然后在
我正在使用pytorch构建一个像VGG16这样的简单模型,并且我已经重载了函数forward在我的模型中。 我发现每个人都倾向于使用 model(input)得到输出而不是 model.forwar
tf.keras API 中的 models 是否多余?对于某些情况,即使不使用 models,代码也能正常运行。 keras.models.sequential 和 keras.sequential
当我尝试使用 docker 镜像运行 docker 容器时遇到问题:tensorflow/serving。 我运行命令: docker run --name=tf_serving -it tensor
我有一个模型,我用管道注册了它: register_step = PythonScriptStep(name = "Register Model",
如果 View 需要访问模型中的数据,您是否认为 Controller 应: a)将模型传递给 View b)将模型的数据传递给 View c)都不;这不应该是 Controller 所关心的。让 V
我正在寻找一个可以在模型中定义的字段,该字段本质上是一个列表,因为它将用于存储多个字符串值。显然CharField不能使用。 最佳答案 您正在描述一种多对一的关系。这应该通过一个额外的 Model 进
我最近了解了 Django 中的模型继承。我使用很棒的包 django-model-utils 取得了巨大的成功。我继承自 TimeStampedModel 和 SoftDeletableModel。
我正在使用基于 resnet50 的双输出模型进行项目。一个输出用于回归任务,第二个输出用于分类任务。 我的主要问题是关于模型评估。在训练期间,我在验证集的两个输出上都取得了不错的结果: - 综合损失
我是keras的新手。现在,我将使用我使用 model.fit_generator 训练的模型来预测测试图像组。我可以使用 model.predict 吗?不确定如何使用model.predict_g
在 MVC 应用程序中,我加入了多个表并将其从 Controller 返回到 View,如下所示: | EmployeeID | ControlID | DoorAddress | DoorID |
我在使用 sails-cassandra 连接系统的 Sails 中有一个 Data 模型。数据。 Data.count({...}).exec() 返回 1,但 Data.find({...}).e
我正在使用 PrimeFaces dataTable 开发一个 jsf 页面来显示用户列表。用户存储在 Model.User 类的对象中。
我正在关注https://www.tensorflow.org/tutorials/keras/basic_classification解决 Kaggle 挑战。 但是,我不明白应该将什么样的数据输入
我是这个领域的新手。那么,你们能帮忙如何为 CNN 创建 .config 文件吗? 传递有关如何执行此操作的文档或教程将对我有很大帮助。谢谢大家。 最佳答案 这个问题对我来说没有多大意义,因为 .co
我是“物理系统建模”主题的新手。我阅读了一些基础文献,并在 Modelica 和 Simulink/Simscape 中做了一些教程。我想问你,如果我对以下内容理解正确: 符号操作是将微分代数方程组(
我是一名优秀的程序员,十分优秀!