Question

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

查看

<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>

Laravel设置表格值=＆＃34;旧（＆＃39;输入＆＃39;）＆＃34;与Vue JS 2

1 个答案: