vue.js - vue - 文本字段绑定值不反映实际值
问题描述
我有一个简单的组件,它接受一个 value 道具并显示一个用于编辑它的文本字段。如果数字低于零,我希望它为零,如果文本从文本字段中删除,我希望它为零。在我的emit
事件中,我可以看到我发出了正确的值,它只是没有反映在文本字段本身中。
我在这里有一个小提琴链接,但主要部分在下面列出:
<div id="app">
<test-component v-model="foo"></test-component>
</div>
const TestComponent = {
props: ['value'],
template: `<div>{{value}}
<input type="number" :value="value" @input="update($event.target.value)" />
</div>`,
methods: {
update(value) {
this.$emit("input", value <= 0 ? 0 : value)
}
}
}
new Vue({
el: "#app",
components: {
'test-component': TestComponent
},
data: {
foo: 1
},
})
基本上发生的事情是我可以看到我的事件正在以值 0 发出,但是,您可以看到 {{value}} 反映了道具中的内容,但是本身的打印值textfield
是空的(或更少大于零)
我在这里肯定有一些基本的误解,我认为 :value 应该反映现实,但显然不是。非常感谢任何帮助!
解决方案
每次更新 foo 更改密钥时,您都需要key
在 then 上放置一个,这应该会触发重新渲染,这就是这里的问题。TestComponent
推荐阅读
- javascript - 选项卡内的事件范围
- linux - 如何将所有合并的远程 git 分支转换为标签?(创建标签,删除分支)
- python - Python:从包含特定单词的文本中选择一个子句
- xml - 使用应用模板时只选择祖父母下的第一个值
- apache-kafka - 为什么尝试查看偏移量时kafka会显示错误?
- selenium - 如何使用 ChromeDriver Chrome 和 Selenium 摆脱 BrowserStack Local 扩展弹出窗口
- ios - NFCTagReaderSession 不启动阅读器会话 IOS 13
- guidewire - 我可以创建多个签名 .pcf 文件吗?
- wordpress - 如果满足元数据的特定条件,是否可以在 Wodpress 中中止发布更新?
- javascript - 如何在 JQuery 中获取鼠标事件?