form and data in vue js

Question

hello community I am implementing a shopping cart in vue js with laravel I am new and I am learning.

I would like to know if I can bind values that I have a form to data( the: form value to data data)

<div class="row no-gutters">
 <!-- data distribution on card -->
 <div class="col-3" v-for="(ProductSearch, index) in ProductSearchs" :key="index.id" >
  <div class="card">
  <img  v-bind:src="ProductSearch.product_images[0].Image" title="Titulo producto" alt="titulo" class="card-img-top" width="120" height="100" >
   <div class="card-body">
    <span v-text="ProductSearch.name ">  </span>
    <span> {{ ProductSearch.sale_price }}</span>
   </div>
   <form method="post" v-on:submit.prevent> 
    <!-- data of products to be sent -->
    <input :value="csrf" type="hidden" name="_token" >
    <input :value="ProductSearch.id" name="id" type="hidden" class="form-control input-lg">
    <input :value="ProductSearch.name" name="name" type="hidden" class="form-control input-lg">
    <input :value="ProductSearch.sale_price" name="precio" type="hidden" class="form-control input-lg">
    <input :value="ProductSearch.cantidad" name="cantidad" min="1" max=5 type="number" class="form-control input-lg"  style="text-align:center" >
    <button v-on:click="addproduct" class="btn btn-info btn-block" type="submit"> Add</button>
   </form>
  </div>
 </div>  
</div>

this data

data(){
    return {
        csrf: document.head.querySelector('meta[name="csrf-token"]').content,

        ProductSearchs:[ ],   // Get data from BD
        Search: '',
        setTimeoutBuscador:'',
        
        // product data to send to card
        Productos:{
            id: 1,
            name: 'producto 3',
            precio: 1,
            cantidad: 1,
        }

    }
},

Don't understand what you are trying to ask. If you want that whatever the user types in the input should be bound to a property on data , use v-model for that eg <input name="search" v-model="Search" /> — Donkarnash
– Donkarnash, Commented Dec 22, 2020 at 20:03
Thank you very much for helping I explain: I get the data in ProductSearchs: [], from there I pass them to the card through v-for, I pass the same data to the form because the form sends that data to the cart What is the detail, how do I link that data, it should be noted that if you send the data that I have defined in data (id, name, price, quantity). but in reality the data that must be sent is the form data that is what I have no idea how to do it — MANUEL
– MANUEL, Commented Dec 22, 2020 at 20:10
You mean that when someone clicks on submit button when addproduct method is triggered you want to get the data in that form to be sent via ajax to the Laravel controller method - is that right? — Donkarnash
– Donkarnash, Commented Dec 22, 2020 at 20:18

Donkarnash · Accepted Answer · 2020-12-22 20:32:00Z

1

You can pass the data via the form to your addproduct method

<button v-on:click="addproduct(ProductSearch)" class="btn btn-info btn-block" type="submit"> Add</button>

Then in the addproduct method you can prepare the data and send the request

addproduct(ProductSearch) {
    let formData = {...ProductSearch};

    //you can add more data to the formData if required
    formData['foo'] = 'bar';

    axios.post('url', formData)
        .then(response => console.log(response))
        .catch(error => console.log(error);
}

answered Dec 22, 2020 at 20:32

Donkarnash

12.9k5 gold badges30 silver badges43 bronze badges

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

Comments

muka.gergely · Accepted Answer · 2020-12-22 20:30:31Z

The usual way of sending data with Vue is creating a form, binding form data & passing it to a submit function, something like this:

new Vue({
  el: "#app",
  data() {
    return {
      input1: null,
      input2: null,
    }
  },
  methods: {
    async handleSubmit() {
      const response = await fetch('https://apiurl.com/submitform' {
        method: "POST",
        body: JSON.stringify({
          input1: this.input1,
          input2: this.input2,
        })
      })
      const json = await response.json()
      console.log(json)
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <form @submit.prevent="handleSubmit">
    Input1: <input type="text" v-model="input1" /><br /> Input2: <input type="text" v-model="input2" /><br />
    <button type="submit">
      SUBMIT
    </button>
  </form>
</div>

Collectives™ on Stack Overflow

form and data in vue js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related