VueJS에서 v-for에 의해 생성된 각 입력 양식에 고유 ID를 제공하는 방법

Question

(props를 통해 전달된) 숫자에 대한 입력 양식을 생성하고 사용자 입력을 inputValues ​​배열에 저장하려고 합니다. 내 코드는 다음과 같습니다:

<템플릿>
<div v-for="n 수" v-bind:key="n">
        <input ref= "inputs" v-bind:id="'str' + n" :v-model="inputValues[n]" />
        
      </div>
</템플릿>

기본 정의 내보내기({
  이름: '이름',
  소품: [
      '숫자',
    ],
  데이터() {
    반품 {
      입력값: []
    }
  }
  });

그러나 inputValues에는 아무것도 저장되지 않습니다. 내가 뭘 잘못했나요? 또한 나중에 CSS에서 스타일을 다르게 지정할 수 있도록 입력 필드에 다른 ID를 어떻게 부여합니까?

편집: 작동하게 만들었습니다!

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

Answer 1

저는 성공했습니다. v-bind: 또는 ":"는 v-model과 함께 사용하면 안 됩니다. n이 0이 아닌 1부터 시작하기 때문에 인덱스를 추가했습니다.

으아악