vue js入力から複数の値を取得

Question

2つの入力フィールドを含む2つのHTMLブロックがあり、フォームを送信するときに入力からすべての値を取得し、値からオブジェクトを作成したい 私はプレーンなバニラJSでそれをやったことが分かりましたが、それはすべきだと思いますが、DOMを少し触れたいと思っているならば、また特定のDOMストライキにも非常に依存しています。より良い方法、VUEのように話をする必要がありますが、これはいくつかの便利なヒントを得るためにここに質問を掲示している理由は、これを行う方法にちょっと固執しています:)

HTML：

<form novalidate autocomplete="off"> 
    <div class="input-block-container"> 
    <div class="input-block"> 
     <input type="text" placeholder="Insert name" name="name[]" /> 
     <input-effects></input-effects> 
    </div> 
    <div class="input-block"> 
     <input type="email" placeholder="Insert email address" name="email[]" /> 
     <input-effects></input-effects> 
    </div> 
    </div> 
    <div class="input-block-container"> 
    <div class="input-block"> 
     <input type="text" placeholder="Insert name" name="name[]" /> 
     <input-effects></input-effects> 
    </div> 
    <div class="input-block"> 
     <input type="email" placeholder="Insert email address" name="email[]" /> 
     <input-effects></input-effects> 
    </div> 
    </div> 
    <button class="button button--primary" @click.prevent="sendInvites"><span>Send</span></button> 
</form> 

の

JS：

methods: { 
    createDataObject() { 

     let emailValues = document.querySelectorAll('input[type="email"]'); 

     emailValues.forEach((email) => { 
     let name = email.parentNode.parentNode.querySelector('input[type="text"]').value; 
      if(email.value !== "" && name !== "") { 
      this.dataObj.push({ 
       email: email.value, 
       name 
      }); 
      } 
     }); 

     return JSON.stringify(this.dataObj); 

    }, 
    sendInvites() { 
     const objectToSend = this.createDataObject(); 

     console.log(objectToSend); 

     //TODO: Methods to send data to server 


    } 
} 

Answer 1

あなたは、静的なコンテンツを持っている場合は、あなたの入力の各々のためのデータ特性を提供することができます。

data: function() { 
    return { 
     name1: '', 
     email1: '', 
     name2: '', 
     email2: '' 
    } 
} 

次に、あなたのテンプレートでそれらを使用する：この方法で

<input type="text" placeholder="Insert name" v-model="name1" /> 

アクセスをthis.name1

で