Собрать данные из формы в data

162

07 марта 2019, 05:10

Начинаю изучать vue, возник вопрос, как данные из input введенные пользователем записать в массив namesThatRhyme, в виде value:введенные данные , т.к сейчас получаю,что при выборе инпута и вводе данных,эти же самые данные появляются в других инпутах.

  <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Test</title>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.0/semantic.min.css">
      <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
      <script src="https://unpkg.com/semantic-ui-vue/dist/umd/semantic-ui-vue.min.js"></script>
      <script src="/home/ramis/project/lab/vue js/js/vue.js"></script>
    </head>
    <style>
      input {
        display: block;
        margin: 5px 0 10px 0;
      }
    </style>
    <body>
      <div style="margin: 120px;" id="app_form">
        <p>A list of names that rhyme: {{namesThatRhyme}}</p>
          <label>
            <input type="" value="Daniel" v-model="namesThatRhyme" placeholder="Daniel" />
          </label>
          <label>
            <input type="" value="Nathaniel" v-model="namesThatRhyme" placeholder="Nathaniel" />
          </label>
          <label>
            <input type="" value="Hubert" v-model="namesThatRhyme" placeholder="Hubert" />
          </label>
      </div>
      <script>
      var app2 = new Vue({
        el: '#app_form',
        data() {
          return {
            namesThatRhyme: []  
          }
        }
      })
      </script>
    </body>
    </html>