CODEWITHSUNDEEP
laravelvue.js
MANUEL
MANUEL

Reputation: 35

form and data in vue js

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,
        }

    }
},

Upvotes: 0

Views: 96

Answers (2)

Donkarnash
Donkarnash

Reputation: 12845

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);
}

Upvotes: 1

muka.gergely
muka.gergely

Reputation: 8329

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>

Upvotes: 0

Related Questions