在没有v-model且没有数据绑定的情况下为输入赋值
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在没有v-model且没有数据绑定的情况下为输入赋值相关的知识，希望对你有一定的参考价值。
在我的v-for中我需要用一些文本初始化一些输入字段而不将它绑定到对象。目前我正在尝试：
<div v-for="item in allItems">
<input type="text" class="header-title" value="item.name"></input>
</div>
但item.name打印在输入而不是项目名称。怎么做到这一点？
答案
v-model只是:value的语法糖和一个事件，通常是@input。请参阅docs here。
您可以传递noop函数() => {}来取消值更新或使用新值执行任何操作，也可以将其分配给另一个对象。
注意：<input>元素无效，它们不需要结束标记。
new Vue({
el: '#app',
data() {
return {
allItems: [{ name: 'foo' },{ name: 'bar' }]
}
},
})<script src="https://unpkg.com/vue@2.5.9/dist/vue.js"></script>
<div id="app">
<div v-for="item in allItems">
<input type="text" class="header-title" :value="item.name" @input="() => {}">
{{ item.name }}
</div>
</div>另一答案
您只需使用item.value属性即可显示ref的输入显示值。
只需添加ref=''并将其值映射到已安装函数内的输入值。
new Vue({
el: '#app',
data () {
return {
allItems: [
{name: 'foo'},
{name: 'bar'}
]
}
},
mounted () {
let self = this;
this.$refs.inp.map( (m, k) => {
m.value = self.allItems[k].name
})
}
})<script src="https://unpkg.com/vue@2.5.9/dist/vue.js"></script>
<div id="app">
<div v-for="item in allItems">
<input type="text" class="header-title" value="item.name" ref='inp'></input>
</div>
</div>以上是关于在没有v-model且没有数据绑定的情况下为输入赋值的主要内容，如果未能解决你的问题，请参考以下文章