コンボがVueJSのリクエスト値を記憶していない

Question

私はちょうど自分のHTMLフォームにVueJSを含めました。それは素晴らしい。

ここでは、条件付き有効/無効入力を作成しました。

今、フォームを送信するたびに、フォームは古い値をもう記憶しません。ここで

は私の入力（それはまたlaravel変数を持っている）である。

<select class="form-control" id="treeType" name="treeType" 
       v-model="tree" v-on:change="treeType()" > 
      <option value="0" 
        @if ($setting->treeType == 0) selected @endif>{{ trans('laravel-tournaments::core.playoff') }} 
      </option> 
      <option value="1" 
        @if ($setting->treeType == 1) selected @endif>{{ trans('laravel-tournaments::core.single_elimination') }} 
      </option> 
     </select> 

そして、ここでは私のVueJSコードです：

new Vue({ 

    el: '#app', 
    data: { 
     isPrelimDisabled: false, 
     isGroupSizeDisabled: false, 
     isAreasDisabled: false, 
     hasPrelim:0, 
     tree:1, 
    }, 
    methods: { 
     prelim: function(){ 
      if (this.hasPrelim == 0){ 
       this.isGroupSizeDisabled = true; 
      }else{ 
       this.isGroupSizeDisabled = false; 
      } 
     }, 
     treeType: function(){ 
      if (this.tree == 0){ 
       this.isPrelimDisabled = true; 
       this.isAreaDisabled = true; 
      }else{ 
       this.isPrelimDisabled = false; 
       this.isAreaDisabled = false; 
      } 
     } 

    }, 
    created() { 
     this.prelim(); 
     this.treeType(); 
    } 
}) 

私は何を忘れていますか？

Answer 1

私は個人的にBlade @ifを使用せず、JS変数として渡します。

<select class="form-control" id="treeType" name="treeType" 
      v-model="tree" v-on:change="treeType()" > 
     <option value="0">{{ trans('laravel-tournaments::core.playoff') }} 
     </option> 
     <option value="1">{{ trans('laravel-tournaments::core.single_elimination') }} 
     </option> 
    </select> 

私は値が戻ってきて、JS varに保存されます。 VueJsが作成されたときに

var treeType = {{ old('tree') ? old('tree') : 0 }}; 

その後、私はそれを渡す

new Vue({ 

el: '#app', 
data: { 
    isPrelimDisabled: false, 
    isGroupSizeDisabled: false, 
    isAreasDisabled: false, 
    hasPrelim:0, 
    tree:1, 
}, 
methods: { 
    prelim: function(){ 
     if (this.hasPrelim == 0){ 
      this.isGroupSizeDisabled = true; 
     }else{ 
      this.isGroupSizeDisabled = false; 
     } 
    }, 
    treeType: function(){ 
     if (this.tree == 0){ 
      this.isPrelimDisabled = true; 
      this.isAreaDisabled = true; 
     }else{ 
      this.isPrelimDisabled = false; 
      this.isAreaDisabled = false; 
     } 
    } 

}, 
    created() { 
    this.tree = treeType; 
    this.prelim(); 
    this.treeType(); 
    } 
})