laravel 如何在Vuejs中将prop值重置为其原始值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46095262/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to reset a prop value to it's original value in Vuejs
提问by Laurent
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 :
我有一个从表单发布数据的 vue 组件，它工作正常，但是，我需要在提交表单后将“selected”道具重置为空值，我该怎么做？这是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>
here's my vue file :
这是我的 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());
},
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.
我需要将所选道具重置为其原始空值，但出现错误，Vuejs 不允许我直接修改道具值，我无法弄清楚如何重置它。谢谢你的帮助。
采纳答案by Laurent
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 :
在blade.php 文件中：
<add-to-cart
:product="{{ $product }}"
@if( ! $product->options()->isEmpty() )
:options="{{ $product->options() }}"
@endif
>
</add-to-cart>
and in the .vue file
并在 .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>
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.
setTimeout 似乎很重要：如果我不这样做，选项会立即重置并且不会存储在购物车中，但产品会。
回答by Stephan-v
Your use case is described in the documentation here:
您的用例在此处的文档中进行了描述：
https://vuejs.org/v2/guide/components.html#One-Way-Data-Flow
https://vuejs.org/v2/guide/components.html#One-Way-Data-Flow
Just like the first example you can assign your prop to a data attribute and clear out this attribute.
就像第一个示例一样，您可以将道具分配给数据属性并清除该属性。
回答by bbsimonbb
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.
道具是反应式（下游）管道。您正在创建一个组件，并声明“我，vue 组件，将忠实地响应作为属性 'selected' 提供给我的对象的变化。” Vue 组件不修改属性。
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.
那么，那个 php 会动态生成你的 add-to-cart 组件的 product 属性的 js 值吗？为什么会这样做？该字符串是js，而不是数据。用 php 动态生成 js 是一团糟。
Sorry to be critical. I'm doing it in the hope that you're life will get easier :-)
抱歉批评。我这样做是希望你的生活会变得更轻松:-)
