How to pass data from a laravel form with a Vuejs component, select tag not working

Question

I have a form used to post product in a shopping cart, I have a Vuejs component setup and it retrieves data just fine, but when I try adding a select tag, I can't pass the data from it. Here's my code for the blade.php file:

    <form action="{{ url('/cart') }}" method="POST" class="side-by-side">
  <input type="hidden" name="id" v-model="this.id" value="{{ $product->id }}">
  <input type="hidden" name="name" v-model="this.name" value="{{ $product->name }}">
  <input type="hidden" name="price" v-model="this.price" value="{{ $product->price }}">

<select  v-model="selected"  required>

            <option disabled value="">Please select one</option>
            @foreach($product->withOptions() as $option)
            <option value="{{ $option->options }}">{{ $option->options }}</option>
            @endforeach

 </select>
 <addToCart :product="{{ $product }}"></addToCart>

and here's my vue file:

export default {
    props: ['product'],

        data() {
            return {
                id: this.product.id,
                quantity: 1,
                name: this.product.name,
                price: this.product.price,
                selected: ''  // always null, can't figure it out
        }
    },

    methods: {
        addtocart() {
            axios.post('/cart/', this.$data)
            .then(flash(this.product.name + ' was added to cart'));
        }
    }
}

Thank you for your help.

Laurent · Accepted Answer · 2017-09-04 11:42:57Z

1

Solved that way:

<addToCart :product="{{ $product }}" :selected="selected"></addToCart>

And in the vue file :

 export default {
    props: ['product', 'selected'],

        data() {
            return {
                id: this.product.id,
                quantity: 1,
                name: this.product.name,
                price: this.product.price,
                options: this.selected
        }
    },

    watch: {
        selected: function() {
            return this.options = this.selected
        }
    },

    methods: {
        addtocart() {
            axios.post('/cart/', this.$data)
            .then(flash(this.product.name + ' was added to cart'));
        },

Just added a watcher thing.

answered Sep 4, 2017 at 11:42

Laurent

591 gold badge1 silver badge10 bronze badges

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

Comments

Ralph519 · Accepted Answer · 2018-04-10 03:03:46Z

1

try this:

<select  v-model="selected"  required>
    <option disabled value="">Please select one</option>
   <option v-for="option in product" v-bind:value="product.option">{{product.option}}</option>
</select>

edited Apr 10, 2018 at 3:03

answered Apr 10, 2018 at 2:56

Ralph519

952 silver badges12 bronze badges

Comments

Geordy James · Accepted Answer · 2017-09-02 18:10:53Z

0

In your blade.php file

<addToCart :product="{{ $product }}" :selected="selected" ></addToCart>

Now in your Vue component, you can access the value of selected like this

 export default {
    props: ['product','selected'],

        data() {
            return {
                id: this.product.id,
                quantity: 1,
                name: this.product.name,
                price: this.product.price,
                selected: this.selected 
           }
        },
        methods: {
          addtocart() {
            self= this;
            axios.post('/cart/',{
                id : self.id,
                quantity: self.quantity,
                name: self.name,
                price: self.price,
                selected: self.selected
             })
            .then(function (response) {
               console.log(response.data);
            })
           .catch(function (error) {
              console.log(error);
            })  
          }
        }
   }

edited Sep 2, 2017 at 18:10

answered Sep 2, 2017 at 15:40

Geordy James

2,4183 gold badges27 silver badges34 bronze badges

8 Comments

Laurent Over a year ago

Thank you for your answer, this lets me select it, but it still doesn't gets sent with the post request tho, the option just stays null..

Geordy James Over a year ago

@Laurent since you are getting selected in your vue component I updated the methods sections. Please try again. Note that you cannot use this directed inside axios which is already inside a method. So i refer this with self.

Laurent Over a year ago

I tried it again, turned it in many many different ways, no luck yet.. Thanks for your help

Geordy James Over a year ago

@Laurent please confirm that you are getting selected prop in your component and your current problem is with posting datas to server

Geordy James Over a year ago

@Laurent i edited the answer and please try again. And if axios post not working give the console log error report

|

Collectives™ on Stack Overflow

How to pass data from a laravel form with a Vuejs component, select tag not working

3 Answers 3

Comments

Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related