在没有v模型且没有数据绑定的情况下为输入分配值

Question

在我的v-for中，我需要使用一些文本初始化一些输入字段，而无需将其绑定到对象。目前我正在尝试：

<div v-for="item in allItems">
  <input type="text" class="header-title" value="item.name"></input>
</div>

但是item.name会打印在输入中，而不是项目名称。如何做到这一点？

Answer 1

v-model通常只是一个语法糖:value，通常是一个事件@input。在这里查看文档。

您可以传递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>

Answer 2

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>