javascript 如何在vuejs项目中使用v-for循环

nbysray5  于 2023-01-11  发布在  Java
关注(0)|答案(2)|浏览(129)

我有一个循环,循环中有4个输入,我想把每个循环的id值分别给4个输入,怎么做?enter image description hereenter image description here
我正在运行一个循环只有一个输入这个输入是值 从一个循环中,我如何使用V模型为每个人提供价值保留

j8yoct9x

j8yoct9x1#

这是基本的Vuej,需要返回如下数据:

<script>
export default {
  data() {
    return {
      items: [{ message: 'Foo' }, { message: 'Bar' }]
    }
  }
}
</script>

然后创建一个v-for循环:

<template>
  <div v-for="(item, index) in items">
        <input :id="index" v-model="item.message" />
  </div>
</template>

因此,在您的情况下,它可能类似于:

<script>
  export default {
    props: {
      altinFiyati: Object
    },
    data() {
      return {
        altinCount: this.altinFiyati,
      }
    }
  }
</script>

然后,在v-for循环中,将任何数据连接到v-model输入:

<template>
  <div v-for="(item, index) in altinCount">
        <input :id="index" v-model="item.message" />
  </div>
</template>
qni6mghb

qni6mghb2#

出了什么问题?您的组件是否正确配置为使用v-model?另外,由于您当前正在迭代该项,因此不需要传入listOfItems[index]。相反,您可以使用v-model=“item”前缀引用该项。

相关问题