How to reset a prop value to it's original value in Vuejs

Question

I have a vue component which posts data from a form and it's working fine, however, I need to reset the 'selected' prop to an empty value after submitting the form, how can I do that? Here's the blade.php file :

 <form action="{{ url('/cart') }}" method="POST" class="side-by-side reset">
        {{ csrf_field() }}
        {{-- form for my super not working with options vue component --}}
        <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 }}">

        @if( ! $product->group->options->isEmpty() )
            <select name="options" class="options" v-model="selected" autofocus required>
                <option value="">Please select one</option>
            @foreach($product->group->options as $option)
                <option class="reset" value="{{ $option->name }}">{{ $option->name }}</option>
            @endforeach
            </select>
        @endif
<addToCart :product="{{ $product }}" :selected="selected" @submit.prevent="onSubmit()"></addToCart>

here's my 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; //this is initially empty, I want to reset it after form submits
        }
    },

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

I need to reset the selected prop to it's original empty value, but I get errors, Vuejs doesn't let me modify the prop value directly and I can't figure out how to reset it. Thanks for your help.

Solution 1

I just noticed this question was never answered. I found a solution a while back. Had to change the component tho.

In the blade.php file :

<add-to-cart
   :product="{{ $product }}"
    @if( ! $product->options()->isEmpty() )
       :options="{{ $product->options() }}"
    @endif
>
</add-to-cart>

and in the .vue file

<template>
<div>
    <input type="hidden" name="id" v-model="this.product.id">
    <input type="hidden" name="name" v-model="this.product.name">
    <input type="hidden" name="price" v-model="this.product.price">
    <select name="options" v-if="options" v-model="option" class="options minimal" required autofocus>
    <option value="" class="reset">Choose</option>
    <option class="options" name="option"
            v-for="option in options"
            v-text="option.name"
            v-bind:value="option.name"
            ></option>
    </select>
    <input type="submit" @click.prevent="addtocart" class="btn btn-success" value="Add To Cart">
</div>
</template>

<script>
export default {
    props: ['product', 'options'],

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

    methods: {
        addtocart() {
            axios.post('/cart', this.$data)
                .then(flash(this.product.name + ' was added to cart'))
                .then( productitemscountchanged() ) // emits an event
                .then(setTimeout( () => {
                    this.option = ''
                }, 100 ))
                .catch( e => {
                    flash(e.response.data, 'danger')
                })
        }
    }
}
</script>

The setTimeout appears to be important: if I don't do that, the option resets instantly and is not stored in the cart but the product is.

Solution 2

Some essential concepts are getting a terrible beating in this code (store, data, prop). In particular, if you don't start with a store, you're heading off backwards.

A prop is a reactive (downstream) pipe. You're creating a component, declaring "I, vue component, will faithfully react to changes in an object supplied to me as the property 'selected'." Vue components do not modify properties.

Then, you watch a property. That's a bit unusual, but alright. But you watch it so as to assign it to a data item whenever it changes. I can't think of, and I can't see in your code, a good reason to do this.

Then, is that php dynamically generating the js value of the product property of your add-to-cart component? Why would it be doing this? That string is js, not data. Dynamically generating js with php is a headwreck.

Sorry to be critical. I'm doing it in the hope that you're life will get easier :-)

Comments

[ggdx]

Have another property with the original value and then this.changedProperty = this.originalValue

[Laurent]

Thanks for your reply, I have this piece of code in app.js file : data: { selected: '' }, If I have anything else (like what is described in the link you referenced) I can't pass the value I want when I submit the form.

[Laurent]

Hi, this code was added 5 months ago, I just posted the solution that worked for me below. With that said, I enjoy criticism, as it always makes me progress. Thanks for your answer

[bbsimonbb]

:-) We're in the same boat as you, introducing Vue into server rendered pages. It's really not the ideal scenario, and it can degenerate.

[Laurent]

Hi, i asked this question 2 years ago, and you made this comment, I followed your advice and indeed my life got easier :-) @bbsimonbb

[bbsimonbb]

I can't believe I wrote this. Glad it helped !