Javascript 如何从Vue中的v-for获取不断变化的输入值

这是一个简短的例子，说明了我想解决的问题

本例基本上显示项目列表中的项目，并允许用户通过输入框调整项目数量。默认设置为0，但客户/用户最多可以将其更改为10

我需要能够访问两件事：itemv的名称和通过val变量的数量？在v-for循环中，每个调整后的输入框

访问项目名称很容易，因为我已经将项目作为道具传递。我可以反复浏览。但我不确定如何访问用户更改的输入值

我必须在这里使用key属性吗？如何遍历所有这些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>

如果是对象，则可以将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>

如果是对象，则可以将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>

---

尝试下面的方法，将输入的v模型关联为itemv的属性

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

---

这将使您能够为循环中的特定项获取特定值。

尝试下面的方法，将输入的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>

这将使您能够为循环中的特定项获取特定值。

您可以使用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>

如果更改输入框组件中的某些字符，itemsArr中item的值将更改为相同的字符串或数字。

您可以使用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>

---

如果更改输入框组件中的某些字符，itemsArr中item的值将更改为相同的字符串或数字。

您希望该数字实现什么？我希望能够将其与每个适当的itemv关联，并通过post请求将其传递到后端。可能将它们都聚集在一个数组或其他东西中，并通过axios传递。这里的项目结构是什么？它是一个对象数组还是一个简单数组？如果是对象数组，它有什么属性？你想用这个数字实现什么？我想能够将它与每个适当的itemv相关联，并通过post请求将它传递到后端。可能将它们都聚集在一个数组或其他东西中，并通过axios传递。这里的项目结构是什么？它是一个对象数组还是一个简单数组？如果是对象数组，它有什么属性？