Javascript 如何将道具值重置为它'；Vuejs中的原始值

我有一个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>

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

我需要将选定的道具重置为其原始的空值，但出现错误，Vuejs不允许我直接修改道具值，我也不知道如何重置它。

---

感谢您的帮助。

此处的文档中描述了您的用例：

---

就像第一个示例一样，您可以将道具指定给数据属性并清除该属性。

我注意到这个问题从未得到回答。 不久前我找到了一个解决办法。必须更换组件tho

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

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

options（）->isEmpty（））
：options=“{{$product->options（）}”
@恩迪夫
>

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

选择
导出默认值{
道具：[“产品”、“选项”]，
数据（）{
返回{
id:this.product.id，
数量：1，
名称：this.product.name，
价格：这个。产品。价格，
选项：“”
}
},
方法：{
addtocart（）{
axios.post（'/cart'，this.$data）
.然后（flash（此.product.name+'已添加到购物车中）
.then（productItemsOntChanged（））//发出一个事件
.然后（设置超时（（）=>{
this.option=“”
}, 100 ))
.catch（e=>{
闪光（如响应数据“危险”）
})
}
}
}

---

setTimeout似乎很重要：如果我不这样做，选项会立即重置，并且不会存储在购物车中，但产品会存储在购物车中。

此代码中的一些基本概念（存储、数据、道具）受到了可怕的打击。特别是，如果你不是从商店开始的

支柱是反应（下游）管道。您正在创建一个组件，声明“I，vue component，将忠实地响应作为属性“selected”提供给我的对象中的更改。”vue组件不会修改属性

然后，你看一个属性。这有点不寻常，但没关系。但您可以监视它，以便在它发生更改时将其分配给数据项。我想不出，也看不出你的代码有什么好的理由这么做

那么，php是否会动态生成AddToCart组件的product属性的js值？它为什么要这样做？该字符串是js，而不是数据。用php动态生成js是一件令人头痛的事

---

抱歉批评你。我这样做是希望你的生活会变得更轻松：-）

拥有另一个具有原始值的属性，然后

this.changedProperty=this.originalValue

感谢你的回复，我在app.js文件中有这段代码：data:{selected:'}，如果我还有其他内容的话（如您引用的链接中所述）我无法在提交表单时传递我想要的值。您好，此代码是5个月前添加的，我刚刚在下面发布了对我有效的解决方案。尽管如此，我喜欢批评，因为它总是让我进步。感谢您的回答：-）我们与您同舟共济，在服务器呈现的页面中引入Vue。这真的不是一个理想的情景，它可能会退化。嗨，我两年前问过这个问题，你发表了这样的评论，我听从了你的建议，我的生活确实变得轻松了：-）@bbsimonbbI真不敢相信我写了这个。很高兴它有帮助！