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。请参阅文档here。

您可以传递一个noop函数() => {}来取消值更新，或者使用新值执行任何操作，也可以将其分配给另一个对象。

注意：<input>元素无效，它们不需要结束标记。

＆＃13;

new Vue({
  el: '#app',

  data() {
    return {
      allItems: [{ name: 'foo' },{ name: 'bar' }]
    }
  },
})

＆＃13;

<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>

＆＃13;

Answer 2

仅使用item.value属性，您的输入显示值为ref。

只需添加ref=''并将其值映射到已安装功能内的输入值即可。

＆＃13;

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
    })
  }
})

＆＃13;

<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>

＆＃13;

在没有v-model且没有数据绑定的情况下为输入赋值

2 个答案: