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。

中

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

然后我会在创建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.tree = treeType;
    this.prelim();
    this.treeType();
  }
})

选择Combo不记得VueJS的请求值

1 个答案: