在Vuejs中用数据库派生的值填充表单-Vuelidate-axios中介的表单

Question

我无法使用从数据库中检索的数据来填充表单元素。

我的表单被“拆分”为几个组件（我仅在下面显示了其中之一-Gap3CropInfo-）。加载“母亲”表单页面Gap3Form时，它将检索用户先前输入的数据（如果存在）。

我的问题是，尽管我可以用这些值填充表单数组，但我不知道如何使它们出现在表单元素中。

Vuelidate用于表单验证。

任何方向将不胜感激。

谢谢汤姆

Gap3Form

<template>
  <v-content>
    <v-container fluid fill-height>
      <v-layout justify-center>
        <v-flex xs12 sm6>
          <h1>Production and sale of produce</h1>
            <v-card flat>
              <div v-if="isIn">
                <div v-if="wizardInProgress">
                  <keep-alive>
                    <component
                      ref="currentStep"
                      :is="currentStep"
                      @update="processStep"
                      :wizard-data="form"
                    ></component>
                  </keep-alive>
                  <div class="progress-bar">
                    <div :style="`width: ${progress}%;`"></div>
                  </div>

                  <!-- Actions -->
                  <div class="buttons" style="padding-right:0.4rem;padding-bottom:1rem;">
                    <button
                      @click="goBack"
                      v-if="currentStepNumber > 1"
                      class="btn-outlined"
                    >Back
                    </button>
                    <button
                      @click="nextButtonAction"
                      :disabled="!canGoNext"
                      class="btn"
                    >{{isLastStep ? 'Process all this information' : 'Next'}}</button>
                  </div>
                  <logout-button></logout-button>
                </div>
                <div v-else>
                  <v-alert
                    v-if="isDone"
                    :value="true"
                    type="success"
                    transition="scale-transition"
                    dismissible
                  >
                    {{message}}
                  </v-alert>
                  <p>Thank you for completing the form.</p>

                </div>
              </div>
              <pre><code>{{form}}</code></pre>
          </v-card>
        </v-flex>
      </v-layout>
    </v-container>
  </v-content>
</template>

<script>
import Gap3CropInfo from './Gap3CropInfo'
import Gap3CropList from './Gap3CropList'
import Gap3Fertilizers from './Gap3Fertilizers'
import Gap3Pesticides from './Gap3Pesticides'
import Gap3HarvestInfo from './Gap3HarvestInfo'
import Gap3SaleInfo from './Gap3SaleInfo'
import LogoutButton from './LogoutButton'

export default {
  components: {
    Gap3CropInfo,
    Gap3Fertilizers,
    Gap3Pesticides,
    Gap3HarvestInfo,
    Gap3SaleInfo,
    LogoutButton
  },
  data () {
    return {
      currentStepNumber: 1,
      gapid: this.$route.params.id,
      lang: this.$i18n.locale,
      canGoNext: false,
      isDone: false,
      wizardData: {},
      message: '',
      alert: true,
      steps: [
        'Gap3CropInfo',
        'Gap3Fertilizers',
        'Gap3Pesticides',
        'Gap3HarvestInfo',
        'Gap3SaleInfo',
      ],
      form: {
        product: null,
        source: null,
        area: null,
        startdate: null,
        fertname1: null,
        fertquant1: null,
        fertdate1: null,
        agchemname1: null,
        agchemquant1: null,
        agchemdate1: null,
        yield: null,
        handling: null,
        saledate: null,
        buyer: null,
        quantitysold: null,
      }
    }
  },
  created(){
    this.loadForm(this.gapid,this.lang);
  },
  computed: {
    isIn : function(){ return this.$store.getters.isLoggedIn},
    isLastStep () {
      return this.currentStepNumber === this.length
    },
    wizardInProgress () {
      return this.currentStepNumber <= this.length
    },
    length () {
      return this.steps.length
    },
    currentStep () {
      return this.steps[this.currentStepNumber - 1]
    },
    progress () {
      return this.currentStepNumber/this.length * 100
    }
  },
  methods: {
    loadForm(gapid,lang){
      var vm = this;
      axios.get('/cropdata/' + gapid)
        .then(function (resp) {
          vm.cards = resp.data;
          var z = vm.cards[0].product.length;
          if (z === 0) {
            vm.bNoRecords = true;
          } else {
            vm.bNoRecords = false;
            vm.form.product = vm.cards[0].product;
            vm.form.source = vm.cards[0].source;
            vm.form.area = vm.cards[0].area;
            vm.form.startdate = vm.cards[0].startdate;
            //vm.$set(vm.wizardData,'product',vm.cards[0].product)
            //vm.Object.assign('product', vm.cards[0].product);
          }
        })
        .catch(function (resp) {
          console.log("Something went wrong!");
          vm.bNoRecords = true;
        });
    },
    nextButtonAction () {
      if (this.isLastStep) {
        this.submitCrop()
      } else {
        this.goNext()
      }
    },
    processStep (step) {
      Object.assign(this.form, step.data);
      this.canGoNext = step.valid
    },
    goBack () {
      this.currentStepNumber--;
      this.canGoNext = true;
    },
    goNext () {
      this.currentStepNumber++;
      this.$nextTick(() => {
      this.canGoNext = !this.$refs.currentStep.$v.$invalid
      })
    }
  }
}
</script>

Gap3CropInfo

<template>
  <div class="formdiv">
      <h3 class="title">Section 1. Crop information</h3>
      <form @input="submit" class="form">
      <v-card-text>
        <v-text-field
            v-model.trim="$v.form.product.$model"
            type="text"
            label="Name of produce/seeds"
            id="product"
            required
            autofocus
        ></v-text-field>
        <v-text-field
            v-model="$v.form.source.$model"
            type="text"
            label="Code: plot/section/farm/farmholder"
            id="source"
            required
        ></v-text-field>
        <v-text-field
            v-model="$v.form.area.$model"
            type="text"
            label="Area of production"
            required
            id="area"
        ></v-text-field>
        <v-text-field
            v-model="$v.form.startdate.$model"
            type="date"
            label="Date of sowing/transplanting"
            required
            id="startdate"
        ></v-text-field>
      </v-card-text>
      </form>
    </div>
</template>

<script>
  import {required} from 'vuelidate/lib/validators'

  export default {
    props: {
      wizardData: {
        type: Object,
        required: true
      }
    },
    data() {
      return {
        form: {
          product: null,
          source: null,
          area: null,
          startdate: null,
        }
      }
    },
    validations: {
      form: {
        product: {
          required
        },
        source: {
          required
        },
        area: {
          required
        },
        startdate: {
          required
        }
      }
    },
    methods: {
      submit () {
        this.$emit('update', {
          data: {
            product: this.form.product,
            source: this.form.source,
            area: this.form.area,
            startdate: this.form.startdate,
          },
          valid: !this.$v.$invalid
        })
      },
    }
  }
</script>