Vuejsで元の値に戻す方法

Question

フォームからデータを投稿するvueコンポーネントがありますが、正常に動作していますが、フォームを送信した後に 'selected' propを空の値にリセットする必要があります、 どうやってやるの？

私はそれが本来の空の値ですが、私はエラーを取得するために選択された小道具をリセットする必要が

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ができません：

<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ファイルです： はここにblade.phpファイルです私は直接小道具価格を変更し、私はそれをリセットする方法を見つけることができません。 ご協力いただきありがとうございます。

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

いくつかの重要な概念は、このコード（store、data、prop）でひどい打撃を受けています。特に、お店で始まらない場合は、you're heading off backwards。

プロップは、反応性（下流）パイプです。あなたはコンポーネントを作成しています。「私はコンポーネントを選択して、プロパティが選択されているので、私に提供されたオブジェクトの変更に忠実に反応します。」と宣言します。 Vueコンポーネントはプロパティを変更しません。

次に、プロパティを監視します。それは少し珍しいですが、大丈夫です。しかし、変更があるたびにデータ項目に割り当てるように注意してください。私は考えることはできません、そして、私はあなたのコードで、これを行う良い理由を見ることができません。

次に、add-to-cartコンポーネントのproductプロパティのjs値を動的に生成するPHPですか？なぜこれをやっているのだろう？その文字列はデータではなくjsです。 PHPを使って動的にjsを生成することは難解です。

申し訳ありません。