v-for 루프 Vue 2의 동적 V-모델 이름

v-for 루프 Vue 2의 동적 V-모델 이름

응용 프로그램을 개발 중이고 사용하고 있습니다.Vue 2javascript 프레임워크로서v-for루프 루프의 카운터를 루프로 바인드할 필요가 있습니다.v-model요소 이름, 내 코드:

<div v-for="n in total" class="form-group">
    <input type="hidden" id="input_id" :name="'input_name_id['  + n  + ']'" v-model="form.parent_id_n" />
</div>  

필요합니다n루프의 카운터가 되는 경우, 예를 들어 첫 번째 요소의 카운터는 다음과 같습니다.

<div class="form-group">
    <input type="hidden" id="input_id" :name="'input_name_id[1]" v-model="form.parent_id_1" />
</div>

그name attribute바인딩은 작동하지만 어떻게 해야 하는지 모르겠습니다.v-model어떻게 할 수 있을까요?

사용방법v-model와 함께form.parent_id[n]:

1. form데이터 속성이어야 합니다.
2. form.parent_id배열이어야 합니다.

다음으로 다음 작업을 수행할 수 있습니다.

<div id="demo">
  <div v-for='n in 3'>
    <input v-model="form.parent_id[n]">
  </div>
  <div v-for='n in 3'>
    {{ form.parent_id[n] }}
  </div>
</div>

다음과 같은 vue 인스턴스를 설정합니다.

var demo = new Vue({
    el: '#demo',
    data: {
      form: {
        parent_id: []
      }
    }
})

이 바이올린으로 동작 예를 확인해 주세요.

또 다른 방법은 오브젝트 속성에 액세스하기 위한 괄호 표기법을 사용하는 것입니다.

<div v-for="n in total" class="form-group">
   <input type="hidden" 
          id="input_id" 
          :name="'input_name_id['  + n  + ']'" 
          v-model="form['parent_id_' + n ]" />
</div> 

10회 반복된 텍스트 파일링 및 각 v-model 분리

<v-text-field
  v-for="(n,index) in 10"
  :key="index"
  v-model="pricing.name[n]"
  color="info"
  outline
  validate-on-blur
/>

저장, 데이터

data() {
    return {
     pricing:{
      name: [],
        }
      }

인덱스를 직접 설정하거나(예: arr[0] = val) 길이 속성을 수정하여 어레이를 수정하는 경우.마찬가지로 Vue.js는 이러한 변경을 선택할 수 없습니다.항상 어레이 인스턴스 방식을 사용하거나 완전히 교체하여 어레이를 수정하십시오.Vue는 편리한 방법을 제공합니다.$set(index, value) - arr.splice(index, 1, value) 구문 설탕입니다.

이 코드는 나에게 효과가 있었다:

HTML

<input type="number" @input="updateValue($event, i, 'pci')" :value="form.neighbours[i].pci" />

JS

        updateValue(event, i, key) {
            const neighbour = {...this.form.neighbours[i]};
            neighbour[key] = event.target.value;
            this.form.neighbours.splice(i, 1, neighbour)
        }

가정하다input_name_id스트링입니다.여러분들이 해야 할 수 있는 건:name="'input_name_id' + n"

여기 유효한 솔루션이 있습니다.

언급URL : https://stackoverflow.com/questions/43364487/dynamic-v-model-name-in-a-v-for-loop-vue-2