Получить все входные значения - Vuejs - PullRequest
Новая
       7

Получить все входные значения - Vuejs

0 голосов
/ 26 февраля 2019

У меня есть несколько input элементов в простом приложении VueJs.Но у меня нет и элементов формы.Теперь я хочу получить все входные значения одновременно и отправить на серверную [laravel] для обработки?

<div>
  <input v-model="foo-bar" placeholder="edit me">
  <input v-model="bar-foo" placeholder="edit me">
  <input v-model="foo-foo" placeholder="edit me">
  <input v-model="bar-bar" placeholder="edit me">
</div>  

<div>
  <input type="button" @click="getAllData">Send</input>
</div>


getAllData(){
  // I have no idea how to get all at once!
}

Ответы [ 2 ]

0 голосов
/ 26 февраля 2019

Как насчет того, чтобы хранить все в удобной форме объекте, например 

new Vue({
  el: '#app',
  data: {
    form: {} // create an object to hold all form values
  },
  methods: {
    getAllData() {
      console.info(this.form)
      // axios.post('/some/url', this.form)
    }
  }
})
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
  <div>
    <input v-model="form['foo-bar']" placeholder="edit me">
    <input v-model="form['bar-foo']" placeholder="edit me">
    <input v-model="form['foo-foo']" placeholder="edit me">
    <input v-model="form['bar-bar']" placeholder="edit me">
  </div>
  
  <div>
    <button type="button" @click="getAllData">Send</button>
  </div>
</div>

Как вы можете видеть в демоверсии, все, что вам нужно сделать, это указать this.form для всех значений.

0 голосов
/ 26 февраля 2019

Привязать входы к опции Vues data: 

new Vue({
  el: "#app",
  data: {
    myArray: [null, null, null, null]
  },
  methods: {
    getAllData() {
      console.log(this.myArray)

      // send to server
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div>
    <input v-for="(arr, index) in myArray" v-model="myArray[index]" @key="index" placeholder="edit me">
  </div>

  <div>
<button type="button" @click="getAllData">Send</button>
  </div>
</div>
...