Как сбросить значение проп в исходное значение в Vuejs

У меня есть компонент VUE, который отправляет данные из формы, и он работает нормально, однако мне нужно сбросить «выбранный» реквизит на пустое значение после отправки формы, как я могу это сделать?
Вот файл blade.php:

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

вот мой файл VUE:

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

Мне нужно сбросить выбранный реквизит до его исходного пустого значения, но я получаю ошибки, Vuejs не позволяет мне напрямую модифицировать значение реквизита, и я не могу понять, как его сбросить.
Спасибо за вашу помощь.

0

Решение

Ваш вариант использования описан в документации здесь:

https://vuejs.org/v2/guide/components.html#One-Way-Data-Flow

Как и в первом примере, вы можете назначить свою опору атрибуту данных и очистить этот атрибут.

0

Другие решения

Я только заметил, что на этот вопрос никогда не отвечали.
Я нашел решение некоторое время назад. Пришлось поменять компонент, хотя.

В файле blade.php:

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

и в файле .vue

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

SetTimeout представляется важным: если я этого не сделаю, опция сбрасывается мгновенно и не сохраняется в корзине, а товар есть.

0

В этом коде некоторые существенные понятия получают ужасное избиение (хранилище, данные, реквизит). В частности, если вы не начинаете с магазина, ты возвращаешься назад.

Опора — это реактивная (нисходящая) труба. Вы создаете компонент, заявляя: «Я, компонент vue, буду добросовестно реагировать на изменения в объекте, предоставленном мне как свойство selected». Компоненты Vue не изменяют свойства.

Затем вы смотрите недвижимость. Это немного необычно, но хорошо. Но вы смотрите его так, чтобы назначать его элементу данных каждый раз, когда он изменяется. Я не могу придумать и не вижу в вашем коде веской причины для этого.

Тогда этот php динамически генерирует значение js свойства продукта вашего компонента add-to-cart? Зачем это делать? Эта строка JS, а не данные. Динамически генерировать js с помощью php — это крушение.

Извините за критику. Я делаю это в надежде, что тебе жизнь станет легче 🙂

0
По вопросам рекламы ammmcru@yandex.ru
Adblock
detector