Question

我试图弄清楚如何设置这个Vue组件，这样如果我在Laravel的后端验证中出现错误，那么我可以保存输入，当它重定向回创建页面然后自动 - 填充旧数据。

截至目前，它还没有将旧数据发送到我的组件的道具。我有什么不对的吗？

刀片文件

<component name="{{ old('name') }}" locationType="{{ old('location_type') }}" paymentType="{{ old('payment_type') }}"></component>

Vue组件

<template>
  <div>
    <div>
      <p class="mbxs"><b>Choose Location Type <span style="color: red">*</span></b></p>
      <label class="custom-control custom-radio" v-for="choice in choices">
        <input name="location_type" type="radio" v-model="chosen" :value="choice" class="custom-control-input" required>
        <span class="custom-control-indicator"></span>
        <span class="custom-control-description">{{ choice }}</span>
      </label>
    </div>
    <template v-if=" chosen == 'Residential' ">
      <div class="row">
        <div class="col-12 col-sm-6">
          <div class="form-group form-group-required">
            <label for="name" class="control-label">Last Name</label>
            <input class="form-control" required name="last_name" type="text">
          </div>
        </div>
        <div class="col-12 col-sm-6">
          <div class="form-group form-group-required">
            <label for="name" class="control-label">First Name</label>
            <input class="form-control" required name="first_name" type="text">
          </div>
        </div>
      </div>
    </template>
    <template v-if=" chosen == 'Commercial' ">
      <div class="form-group form-group-required">
        <label for="name" class="control-label">Name</label>
        <input class="form-control" required name="name" type="text">
      </div>
    </template>
  </div>
</template>

<script>
  module.exports = {
  http: {
    headers: {
      'X-CSRF-TOKEN': window.Laravel.csrfToken
    }
  },
  props: [ 'name', 'locationType', 'paymentType' ],
  data: function(){
    return {
      name: '',
      locationType: '',
      locationName: '',
      paymentType: '',
      insuranceType: '',
      choices: [ 'Commercial', 'Residential'],
      chosen: ''
    };
  }
}
</script>

Answer 1

您正在定义道具this.name, this.locationType, this.PaymentType，然后您在data声明中将它们指定为空，这样您就会发生碰撞。

鉴于你的架构，它不是最优雅的，但它可能会做：

props: [ 'name', 'locationType', 'paymentType' ],
created: function() {
    this.form.name = this.name;
    this.form.locationType = this.locationType;
    this.form.paymentType = this.paymentType;        
},
data: function() {
    form: {
        name: '',
        locationType: '',
        locationName: '',
        paymentType: '',
        insuranceType: '',
        choices: [ 'Commercial', 'Residential'],
        chosen: ''
    }
}

我们已将数据命名为form，并将我们的属性值分配给form命名空间。

将绑定更新为v-model="form.name"等。

将旧数据发送回Vue组件

1 个答案: