Question

我有一个vue组件，可以从表单中发布数据并且工作正常，但是，我需要重置“已选择的”＃39;在提交表格后支持空值，我该怎么做？这是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不允许我直接修改道具值，我无法弄清楚如何重置它。谢谢你的帮助。

Answer 1

您的使用案例在此处的文档中进行了描述：

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

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

Answer 2

我刚才注意到这个问题从未得到解答。我不久前找到了一个解决方案。不得不改变组件。

在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似乎很重要：如果我不这样做，该选项会立即重置，但不会存储在购物车中，但产品是。

Answer 3

一些基本概念在这段代码（商店，数据，道具）中得到了可怕的打击。特别是，如果您不是从商店开始，you're heading off backwards。

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

然后，你看一个属性。这有点不寻常，但还好。但是你要观察它，以便在数据项发生变化时将其分配给数据项。我无法想到，而且在代码中看不到，这是一个很好的理由。

然后，php是否动态生成add-to-cart组件的product属性的js值？为什么要这样做？该字符串是js，而不是数据。使用php动态生成js是一个难题。

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

如何在Vuejs中将prop值重置为它的原始值

3 个答案: