Блог

Привет, у меня есть такой список:

 <tr v-for="(post, index) in posts" v-bind:index="index">
    <td>{{ post.rut }}</td>
    <td>{{ post.names }} {{ post.father_lastname }} {{ post.mother_lastname }}</td>
    <td>
       <input type="number" class="form-control" id="exampleInputEmail1" v-bind:value="post.employee_id" @input="form.amount[post.employee_id]" placeholder="Ingresa el monto">
    </td>
</tr>
 

Я определил в v-bind:значение=»» начальное значение для каждого ввода списка, затем мне нужно отправить эти данные с помощью axios, но когда я это делаю, он ничего не отправляет, я имею в виду, что я не могу поймать значение для каждого ввода, почему? потому что он отображает значение.. мой axios-это:

 onSubmit(e) {
     this.loading = true; //the loading begin
     e.preventDefault();
     let currentObj = this;

     const config = {
                headers: { 'content-type': 'multipart/form-data' }
            }

            let formData = new FormData();
            formData.append('amounts', JSON.stringify(this.form.amount));

            axios.post('/api/payroll_management/store?api_token=' App.apiToken, formData, config)
            .then(function (response) {
                currentObj.success = response.data.success;
            })
            .catch(function (error) {
                console.log(error);
            });
        }
 

поэтому мне интересно, как я могу получить данные из входных данных? если он вернет пустую эту.форму.сумму

Спасибо

Поскольку каждая запись имеет amount значение , которое изменяется вместе с <input> , проще, чтобы это значение было частью самого post элемента.

Это делается с помощью v-model="post.amount" (см. Документацию) на <input> каждом post из них .

Таким образом, существует единственное место, где находится значение суммы и где оно обновляется.

Затем, когда вы отправляете форму, вы можете получить массив значений этих сумм с помощью вычисляемого свойства (см. Документацию).

Для лучшего понимания происходящего я настоятельно рекомендую ознакомиться с документацией VueJS, так как она очень удобочитаема и все довольно хорошо объясняет.

Теперь, собрав все это воедино, взгляните на этот пример:

 new Vue({
  el: "#app",
  data: {
    posts: [
      {
        rut: "A",
        names: "Name Name",
        father_lastname: "Lastname",
        mother_lastname: "Lastname2",
        employee_id: 5,
        amount: 5, // Default value here
      },
      {
        rut: "B",
        names: "Name Name",
        father_lastname: "Lastname",
        mother_lastname: "Lastname2",
        employee_id: 2,
        amount: 2, // Default value here
      },
    ],
  },
  computed: {
    // Make form data a computed object.
    form: function() {
      // Get only the amount values from the posts.
      // The inputs will update those automatically,
      // so these will change as well.
      let amount = this.posts.map((post, idx) => {
        return parseInt(post.amount); // parseInt() is optional here
      });
      
      return {
        amount: amount,
        // ... other stuff
      };
    },
  },
  methods: {
    getFormData: function() {
      console.log( JSON.stringify(this.form.amount) );
    }
  }
}) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
<h2>Posts:</h2>
<table>
    <tr v-for="(post, index) in posts" v-bind:index="index">
        <td>{{ post.rut }}</td>
        <td>{{ post.names }} {{ post.father_lastname }} {{ post.mother_lastname }}</td>
        <td>
             <input type="number" class="form-control" v-model="post.amount">
        </td>
    </tr>
</table>
<br/>
<button v-on:click="getFormData()">Console log form data</button>

</div>