vue j를 사용하여 여러 입력 필드 리피터를 작성하는 방법

vue j를 사용하여 여러 입력 필드 리피터를 작성하는 방법

vue js 샘플 출력을 사용하여 여러 이름을 추가하기 위한 동적 형식 필드를 만듭니다.-> https://prnt.sc/h6y0pf

여기 html이 있습니다.

<div id="app">
  <h1>Vue JS Multiple Fields Repeater</h1>
  <div class="border" v-for="field in field1">
    <input v-model="field.value" placeholder="Enter First Name">
    <input v-model="field2.value" placeholder="Enter Last Name">
  </div>
  <button @click="AddField">
    New Field
  </button>
  <pre>{{ $data | json }}</pre>
</div>

여기 내 vuejs가 있다

new Vue({
  el: '#app',
  data: {
    field1: [] ,
    field2: [] 
  },
  created: function() {
      this.field1.push({ value: '' });
      this.field2.push({ value: '' });
  },
  methods: {
    AddField: function () {
      this.field1.push({ value: '' });
      this.field2.push({ value: '' });
    }
  }
});

여기서 jsfiddle을 만들었습니다.-> https://jsfiddle.net/0e3csn5y/2/

문제는 새 필드를 추가할 때마다 이름만 입력할 수 있다는 것입니다.성 필드에도 어떻게 해야 하나요?여기서 어려운 부분을 어떻게 해야 하죠?

현재 시도에서는 두 입력을 동일한 개체로 바인딩하는 것이 어렵습니다. 이렇게 바인딩하십시오.first-name그리고.last-name적절히.

new Vue({
  el: '#app',
  data: {
    fields: [{ first: '',last: '' }],
  },
  created: function() {
  },
  methods: {
    AddField: function () {
      this.fields.push({ first: '',last: '' });
    }
  }
});

.border {
  border: 1px solid black;
  padding: 3px;
  margin-bottom: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.14/vue.js"></script>
<div id="app">
  <h1>Vue JS Multiple Fields Repeater</h1>
  <div class="border" v-for="field in fields">
    <input v-model="field.first" placeholder="Enter First Name">
    <input v-model="field.last" placeholder="Enter Last Name">
  </div>
  <button @click="AddField">
    New Field
  </button>
  <pre>{{ $data | json }}</pre>
</div>

당신이 이것을 문제 삼는 이유는 javascript의 한계와 반응성에 미치는 영향 때문입니다.

나는 이상적인 해결책에 대한 다른 반응에 동의한다.단, 2개의 어레이를 사용하는 경우에는 다음 옵션이 하나 더 있습니다.

중요한 부분:

v-for="i in field1.length"길이까지 0이 루프됩니다.

그런 다음 개체에서 값 사용을 제거하고 다음을 사용하여 설정합니다.this.field1.push('')사용하다field1[i]

https://jsfiddle.net/0e3csn5y/4/

html:

<div id="app">
  <h1>Vue JS Multiple Fields Repeater</h1>
  <div class="border" v-for="i in field1.length">
    <input v-model="field1[i]" placeholder="Enter First Name">
    <input v-model="field2[i]" placeholder="Enter Last Name">
  </div>
  <button @click="AddField">
    New Field
  </button>
  <pre>{{ $data | json }}</pre>
</div>

js:

new Vue({
  el: '#app',
  data: {
    field1: [] ,
    field2: [] 
  },
  created: function() {
      this.field1.push('');
      this.field2.push('');
  },
  methods: {
    AddField: function () {
      this.field1.push('');
      this.field2.push('');
    }
  }
});

언급URL : https://stackoverflow.com/questions/47141131/how-to-create-multiple-input-fields-repeater-using-vue-js