Question

我正在使用Vuejs运行Laravel应用程序，并且有一个用vuejs编码的表单，然后使用后端进行验证。如果我的验证失败了，我将传递给主管，房屋建筑师，并细分到表单组件。当表单加载备份时，如果选择了房屋建筑商，它将不会自动选择细分和管理者。我仍然得到传递的管理者和细分的正确值。它目前没有填充两个下拉列表的必要选项。

<div class="form-group form-group-required">
          <label for="homebuilder" class="control-label">Homebuilder</label>
          <select class="form-control" required name="homebuilder" v-model="homebuilder" v-on:change="chooseHomebuilder()">
            <option :value="null">-- Select Homebuilder --</option>
            <option v-for="homebuilder in homebuilders" :value="homebuilder.id">{{homebuilder.name}}</option>
          </select>
        </div>

        <template v-if="chosenHomebuilder">

          <div class="row">

            <div class="col-12">
              <div class="form-group form-group-required">
                <label for="subdivision" class="control-label">Subdivision</label>
                <select class="form-control" required name="subdivision" v-model="subdivision">
                  <option :value="null">-- Select Subdivision --</option>
                  <option v-for="subdivision in chosenHomebuilder.subdivisions" :value="subdivision.id">{{subdivision.name}}</option>
                </select>
              </div>
            </div>

            <div class="col-12">
              <div class="form-group form-group-required">
                <label for="superintendent" class="control-label">Superintendent</label>
                <select class="form-control" required name="superintendent" v-model="superintendent">
                  <option :value="null">-- Select Superintendent --</option>
                  <option v-for="superintendent in chosenHomebuilder.superintendents" :value="superintendent.id">{{superintendent.name}}</option>
                </select>
              </div>
            </div>


props: ['oldHomebuilder', 'oldSuperintendent', 'oldSubdivision']
chosenHomebuilder: this.oldHomebuilder,
homebuilder: this.oldHomebuilder,
superintendent: this.oldSuperintendent,
subdivision: this.oldSubdivision,

chooseHomebuilder: function(){
    if(this.chosenHomebuilder) {
      _.map(this.chosenHomebuilder.phases,(obj) => {
        return obj.chosen = false;
      });
    }
    if( this.homebuilder ){
      var self = this;
      this.homebuilders.filter(function(obj){
        if( obj.id === self.homebuilder ){
          self.chosenHomebuilder = obj;
        }
      });
    }else{
      this.chosenHomebuilder = null;
    }
  },

Answer 1

如果您使用的是VueJS 2.0，为了使您的模板能够对您更改的数据做出反应，您需要将数据封装在数据对象中，并且方法对象中的方法如下：

{
    data: () => {
        return {
            chosenHomebuilder: this.oldHomebuilder,
            homebuilder: this.oldHomebuilder,
            superintendent: this.oldSuperintendent,
            subdivision: this.oldSubdivision,
        }
    },
    methods: {
        chooseHomebuilder() {
            if (this.chosenHomebuilder) {
                _.map(this.chosenHomebuilder.phases, (obj) => {
                    return obj.chosen = false;
                });
            }
            if (this.homebuilder) {
                var self = this;
                this.homebuilders.filter(function(obj) {
                    if (obj.id === self.homebuilder) {
                        self.chosenHomebuilder = obj;
                    }
                });
            } else {
                this.chosenHomebuilder = null;
            }

        }
    }
}

不选择传入子下拉列表的值

1 个答案: