как получить изменение входного значения из v-for in Vue - PullRequest
Новая
       5

как получить изменение входного значения из v-for in Vue

1 голос
/ 16 июня 2020

Это короткий пример, иллюстрирующий то, что мне интересно решить.

Этот пример в основном отображает элементы из списка элементов и позволяет пользователю регулировать количество элементов через поле ввода. По умолчанию установлено значение 0, но клиент / пользователь может изменить его до 10.

Мне нужно иметь доступ к двум вещам: имени элемента («itemv») и количеству (через переменная val?) каждого настроенного поля ввода в этом v-for l oop.

Доступ к имени элемента очень прост, так как у меня уже есть элементы, переданные как опора. Я могу просто повторить. Но я не уверен, как получить доступ к входным значениям, которые изменяет пользователь.

Должен ли я использовать здесь ключевой атрибут? Как мне перебрать все эти компоненты InputBox и получить значение? 

<template>

  <div>
      <span v-for="(itemv,  index) in items" :key="index">
          <p>{{itemv}}
            <InputBox :value="val" :min="0" :max="10"></InputBox>
          </p>
    </span>

  </div>

</template>


<script>
import { EventBus } from '../event-bus.js';
import InputBox from "./InputBox";

export default {
  name: 'ProductsPage',
  components: {InputBox},
  props: ['items'],
  data: function () {
  return {
      val: 0,
  }
}
}
</script>

Ответы [ 3 ]

1 голос
/ 16 июня 2020

Попробуйте это ниже, свяжите v-модель ввода как атрибут элемента v 

<span v-for="(itemv,  index) in items" :key="index">
      <p>{{itemv}}
        <InputBox v-model="itemv.value" :min="0" :max="10"></InputBox>
      </p>
</span>

Это позволит вам получить конкретное значение для вашего конкретного элемента в вашем l oop.

1 голос
/ 16 июня 2020

вы можете использовать v-model, чтобы получить измененное входное значение 

<template>
  <div class="container">
    <div v-for="box in itemsArr" :key="box.label">
      <input-box v-model="box.value" :min="0" :max="10" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      itemsArr: [
        { value: 0, label: "a" },
        { value: 0, label: "b" },
        { value: 0, label: "c" }
      ]
    };
  }
}
</script>

, если вы измените некоторые символы в компоненте input-box, значение элемента в itemsArr изменится на ту же строку или номер.

1 голос
/ 16 июня 2020

Вы можете от v-model до itemv, если это объект, для захвата входных значений, например: 

<span v-for="(itemv,  index) in items" :key="index">
          <p>{{itemv}}
            <InputBox v-model="itemv.val" :min="0" :max="10"></InputBox>
          </p>
</span>

Затем вы можете перебирать их в своих методах, например: 

let total = 0;
for(let i in this.items) total += items[i].val || 0;
console.log(total);
...