如何在VueJS中为使用v-for生成的每个输入表单给予ID?

jq6vz3qz  于 2023-05-01  发布在  Vue.js
关注(0)|答案(1)|浏览(144)

我尝试生成number(作为props传递)输入表单,并将用户输入存储在数组inputValues中。代码如下:

<template>
<div v-for="n in number" v-bind:key="n">
        <input ref= "inputs" v-bind:id="'str' + n" :v-model="inputValues[n]" />
        
      </div>
</template>

export default defineComponent({
  name: 'name',
  props: [
      'number',
    ],
  data() {
    return {
      inputValues: []
    }
  }
  });

但是没有任何东西存储在inputValues中。我做错了什么?还有,我怎样才能给输入字段给予不同的id,以便以后在css中使用不同的样式?
编辑:设法让它工作!

<div v-for="(n,i) in number"  v-bind:key="n">
        <input ref= "inputs" :id="'str' + n" v-model="inputValues[i]" />
        
</div>
wtzytmuj

wtzytmuj1#

我设法让它工作。v-bind:或“:“不应该在v-model上使用。i作为索引添加,因为n从1而不是0开始。

<div v-for="(n,i) in number"  v-bind:key="n">
        <input ref= "inputs" :id="'str' + n" v-model="inputValues[i]" />
        
</div>

相关问题