How to set up a dynamic created input field (array) with a default value in Vue.js

Question

I am trying to create a form which shows me rows of products coming through axio. Each row should have an input field which should have a 0 as a default value and then I want a + and - to increase the figure. In the end I want to be able to send the form off with the individual values for each product.

Below is my first attempt. I get the rows with the products, but the default value in the input field for the qty is empty and not 0 as it should be. so it does not seem to take the 0 which I set in data. I have tried to set it in Axio as well like this.products.qty = 0; but that does not work as well. How can I achieve it?

 <template>
<div>
 <table class="table">
  <tr>
    <th>Product Name</th>
    <th>Quantity</th>
  </tr>
    <tr v-for="(product, index) in products" :key='product.productId' >
    <td>{{ product.productName }}
      <input type="text" name="product.productId" :value="product.productId" />
    </td>
    <td>
      <div class="minusplusnumber">
        <div class="mpbtn minus" v-on:click="mpminus(index)">
          -
        </div>
        <div id="field_container">
          <input type="number" name="product.qty" :value="product.qty" disabled />
        </div>
        <div class="mpbtn plus" v-on:click="mpplus(index)">
          +
        </div>
      </div>
    </td>
  </tr>
  </table>
export default {
  name: "example",

  data: () => ({
     products:[{
                "productId": '',
                "productName" : '',
                "qty" : 0,
                }],
  }),

  methods: {
                    
     loadProducts : function () {

         axios
             .post('/products/get-all-products')
             .then(res => {
                   this.products = res.data.products;
                   // tried below also not working
                   this.products.qty = 0
              })
              .catch(err => {
                  console.log(err);
              });
     }

      mpplus: function (index) {
           this.newQty =   this.products[index].qty+1;
           Vue.set( this.products[index].qty, index, this.newQty)
      }

      mpminus: function (index) {
           this.newQty =   this.products[index].qty-1;
           Vue.set( this.products[index].qty, index, this.newQty)
      }

     }
   }
};

Why do you GET all products using Axios POST? Does your backend did return the expected result if you try hitting it manually using postman or etc? — Kevin Yobeth
– Kevin Yobeth, Commented Apr 13, 2021 at 9:04
I am sending over data to get a group of products that is why I use Axios POST. Qty is not part of what I return from Axios, this gets added on the page itself so its not part of the original Object I am running through in my <tr v-for="(product, index) in products" :key='product.productId' > — Luka
– Luka, Commented Apr 13, 2021 at 9:12
could you attach the console log result for res.data object? — Kevin Yobeth
– Kevin Yobeth, Commented Apr 13, 2021 at 9:21
Its just an Array of Objects with the Product data and without the qty because I want to add that in my Vue.js to all the Product Objects after it got returned from Axios. — Luka
– Luka, Commented Apr 13, 2021 at 9:37

mare96 · Accepted Answer · 2021-04-13 10:43:33Z

1

You need something like this in your :

axios.post('/products/get-all-products')
.then(res => {
    res.data.products.forEach(prod => {
        this.products.push({
            "productId": prod.productId,
            "productName" : prod.productName,
            "qty" : 0,
        }) 
    })
})

With that code above you will map data from your response with the new field qty.

I guess that is what you need.

answered Apr 13, 2021 at 10:43

mare96

3,8541 gold badge22 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Luka Over a year ago

Brilliant. Thank you mare96 thats working. i really thought I could somehow add it to the data() in the top to make it a default for every single array element, but obviously not. I did had to add this.products.splice(0); above my axios since it would double up if I just close the Modul and open it again, but thats fine now and its working. Now I only have to find a way to make the + and - working but for that I needed a 0 in the first place. Thank you !!

Collectives™ on Stack Overflow

How to set up a dynamic created input field (array) with a default value in Vue.js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related