Laravel 使用 Vue JS 2 设置表单 value="old('input')"

Question

我有一个简单的表格，上面有一个计算器，用于计算包括运费和税费在内的充电器金额。如果表单已提交并返回错误，如何使用 Vue JS 将旧输入显示到表单的 value 字段中？实例值恢复正确，但它们未显示在表单中。

查看

<div class="form-group">
    <label for="totalAmount">Total Amount</label>
    <div class="input-group">
        <div class="input-group-addon">$</div>
        <input type="totalAmount" class="form-control" id="totalAmount" name="totalAmount" value="{{old('totalAmount')}}" v-model="totalAmount" v-on:change="getTotal" placeholder="0.00" required>
    </div>
</div>
<div class="form-group">
    <label for="shipAmount">Shipping Amount</label>
    <div class="input-group">
        <div class="input-group-addon">$</div>
        <input type="shipAmount" class="form-control" id="shipAmount" name="shipAmount" value="{{ old('shipAmount') }}" v-model="shipAmount" v-on:change="getTotal" placeholder="0.00">
    </div>
</div>
<div class="form-group">
    <label for="taxRate">Tax Rate</label>
    <div class="input-group">
        <div class="input-group-addon">%</div>
        <input type="taxRate" class="form-control" id="taxRate" name="taxRate" value="{{ old('taxRate') }}" v-model="taxRate" v-on:change="getTotal" placeholder="0.00">
    </div>
</div>
<div class="widget-body text-center">
    <h4 class="m-b-md">Total Amount $ @{{ combinedAmount }}</h4>
</div>

JS 文件

    new Vue({
    el: '#app-content',
    data: {
        billSameAsShip: '',
        isHidden: 'true',
        totalAmount: '',
        shipAmount: '',
        taxRate: '',
        combinedAmount: ''
        },
    computed: {
        totalAmount2: function () {
            return this.totalAmount = {{ old('totalAmount') ?? 0 }};
        },
        shipAmount2: function () {
            return this.shipAmount = {{ ( old('shipAmount') ?? 0 ) }};
        },
        taxRate2: function () {
            return this.taxRate = {{ ( old('taxRate') ?? 0 ) }};
        }
    },
    beforeUpdate() {
        this.getTotal()
        this.totalAmount = this.totalAmount2;
    },
    methods: {
        onChange: function() {
            if(this.billSameAsShip == 'false'){ 
            this.isHidden = !this.isHidden;
            }
            else {
                this.isHidden = Boolean('true');
            }
        },
        checkNaN: function() {
            if(isNaN(parseFloat(this.totalAmount))){
                this.totalAmount = 0
            }
            if(isNaN(parseFloat(this.shipAmount))){
                this.shipAmount = 0
            }
            if(isNaN(parseFloat(this.taxRate))){
                this.taxRate = 0
            }
        },
        getTotal: function() {
            this.checkNaN();
            this.combinedAmount = (parseFloat(this.totalAmount) + parseFloat(this.shipAmount)) * (1 + (parseFloat(this.taxRate /100)));
        }
    }
    })
</script>

Answer 1

因为你使用v-model 将你的输入绑定到模型，你不需要使用 Laravel 的value="{{ old('input') }}"。您需要做的就是从输入中删除值属性并清除整个计算函数。在您的逻辑中，一旦您提交了数据，您将需要清除/重置可编辑输入。

new Vue({
  el: "#app-content",
  data: {
    billSameAsShip: "",
    isHidden: "true",
    totalAmount: "",
    shipAmount: "",
    taxRate: "",
    combinedAmount: ""
  },
  beforeUpdate() {
    this.getTotal()
    this.totalAmount = this.totalAmount2;
  },
  methods: {
    onChange: function() {
      if (this.billSameAsShip == "false") {
        this.isHidden = !this.isHidden;
      } else {
        this.isHidden = Boolean("true");
      }
    },
    checkNaN: function() {
      if (isNaN(parseFloat(this.totalAmount))) {
        this.totalAmount = 0;
      }
      if (isNaN(parseFloat(this.shipAmount))) {
        this.shipAmount = 0;
      }
      if (isNaN(parseFloat(this.taxRate))) {
        this.taxRate = 0;
      }
    },
    getTotal: function() {
      this.checkNaN();
      this.combinedAmount =
        (parseFloat(this.totalAmount) + parseFloat(this.shipAmount)) *
        (1 + parseFloat(this.taxRate / 100));
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<div id="app-content">
  <div class="container">
    <div class="row">
      <div class="col-sm-4">
        <div class="form-group">
          <label for="totalAmount">Total Amount</label>
          <div class="input-group">
            <div class="input-group-addon">$</div>
            <input type="totalAmount" class="form-control" id="totalAmount" name="totalAmount" v-model="totalAmount" v-on:change="getTotal" placeholder="0.00" required>
          </div>
        </div>
        <div class="form-group">
          <label for="shipAmount">Shipping Amount</label>
          <div class="input-group">
            <div class="input-group-addon">$</div>
            <input type="shipAmount" class="form-control" id="shipAmount" name="shipAmount" v-model="shipAmount" v-on:change="getTotal" placeholder="0.00">
          </div>
        </div>
        <div class="form-group">
          <label for="taxRate">Tax Rate</label>
          <div class="input-group">
            <div class="input-group-addon">%</div>
            <input type="taxRate" class="form-control" id="taxRate" name="taxRate" v-model="taxRate" v-on:change="getTotal" placeholder="0.00">
          </div>
        </div>
        <div class="widget-body text-center">
          <h4 class="m-b-md">Total Amount $ {{ combinedAmount }}</h4>
        </div>
      </div>
    </div>
  </div>
</div>