Question

所以基本上我有这个；

    <ul class="queryView">
      <li
      v-for="(object, index) in Objects"
      >
        {{ object.key }}
        <input
        type="text"
        @input="saveValue(value)"

        >
      </li>
    </ul>

...

 saveValue(value){
    ... do somthing with value
  },

由于v-model处于循环中，因此它不起作用，因为它们会影响每个循环的元素。也就是说，如果我在一个输入字段中输入一个单词，则所有字段都将显示相同的单词。

因此，我需要直接将输入值输入函数中。

Answer 1

查看文档：{{3}}

[…]方法将本机事件作为唯一参数。如果使用内联语句，则该语句可以访问特殊的$event属性：v-on:click="handle('ok', $event)"。

https://vuejs.org/v2/api/#v-on "input"具有一个event属性，在您的情况下是您的target元素，您可以在其上读取其当前的<input>。 / p>

new Vue({
  el: '#app',
  methods: {
    saveValue(event) {
      const target = event.target;
      const value = target.value;
      console.log(value);
    },
    otherMethod(text1, event) {
      console.log(text1);
      console.log(event.target.value);
    },
  },
});

<script src="https://unpkg.com/vue@2"></script>

<div id="app">
  <ul>
    <li v-for="i in 3">
      {{i}}<input @input="saveValue" />
    </li>
  </ul>
  <p>
    With inline statement:
    <input @input="otherMethod('other', $event)" />
  </p>
</div>

Answer 2

v-model可以正确使用。

请参阅此JS小提琴： https://jsfiddle.net/eywraw8t/167740/

但是，如果您想使用函数来处理值，那也很好，但更为冗长。

请参阅此JS小提琴： https://jsfiddle.net/eywraw8t/167731/

将输入值直接传递到循环内的函数中

2 个答案: