无法使用Vue验证表单

Question

我对Vue还是很陌生，我可以运行以下代码，但是会出现 ReferenceError: $vAddress is not defined 错误。我已经搜索过Google，但似乎找不到解决我问题的方法。

<form class="form-horizontal" role="form">
    <validator name="vAddress">
        <div :class="{'has-error': $vAddress.firstname.required}" class="form-group">
            <label for="firstname" class="control-label">First Name</label>
            <div class="text-left">
                <input
                type="text"
                class="form-control"
                name="firstname"
                v-validate:firstname="['required']"
                v-model="newAddress.firstname">
                <small v-if="$vAddress.firstname.required" class="help-block text-danger">The first name is required</small>
            </div>
        </div>
        <div ...>
    </validator>
</form>

<script type="text/javascript">
    (function() {
      var account = new Vue({
        el: '#checkout-content',
        data: {
          user: {!! json_encode(Auth::user()) !!},
          billingAddress: {!! json_encode($billing_address) !!},
          shippingAddress: {!! json_encode($shipping_address) !!},
          newAddress: {},
          activeAddress: {
            shipping: '',
            billing: '',
          },
          alert: ""
        },
        computed:{
            shipping: function(){
                return !(typeof this.activeAddress.billing == 'undefined' || typeof this.activeAddress.shipping == 'undefined');
            }       

        },
        filters: {
          isExist: function(value){
            if (typeof value === 'undefined') return ' ';
            return value;
          }
        },
        methods: {
          // save new address
          saveAddress: function() {
              // save new address
              if (typeof this.newAddress.key == 'undefined') {
                  if (typeof this.user.data.address == 'undefined')
                      this.$set('user.data.address', []);
                  if (this.newAddress.defaultAddress){
                      this.clearDefaultAddress();
                  }
                  this.user.data.address.push(this.newAddress);
              }else{
                  var key = this.newAddress.key;
                  if (this.newAddress.defaultAddress){
                      this.clearDefaultAddress();
                  }
                  this.user.data.address[key] = this.newAddress;
              }
              this.$http.post("{{ route('account-addresses') }}", {
                  address:this.user.data.address
              }).then((response) => {
                  this.user.data.address = response.body.user.data.address;
                  $.notify({
                      message: response.body.message
                  },{
                   type: 'success',
                   animate: {
                    enter: 'animated fadeInDown',
                    exit: 'animated fadeOutUp'
                   },
                });
                // reset values
                $('#new-address').modal('hide');
                this.newAddress = '';
              }, (response) => { });
          },
          // update address
          updateAddress: function(address, index) {
              this.newAddress = address;
              this.newAddress.key = index;
              this.user.data.address[index] = '';
              $('#new-address').modal('show');
          },
          clearDefaultAddress: function(){
              // clear all default values to none
              for (var i = 0; i < this.user.data.address.length; i++) {
                  this.user.data.address[i].defaultAddress = 0;
              }
          },
          shippingProccess: function(){
            if(typeof this.activeAddress.billing == 'undefined' || typeof this.activeAddress.shipping == 'undefined') {
                this.alert.error = true;
            }else{
                this.alert.loading = true;
                this.$http.post('{{ url('checkout/add_address') }}', {
                    billing: this.activeAddress.billing,
                    shipping: this.activeAddress.shipping
                }).then((response) => {
                    // PROSSED TO NEXT STEP
                    window.location = '{{ url('checkout/shipping') }}'; 
                }, (response) => {
                });
            }
          }
        },
        ready() {
          // set default address
            this.activeAddress.billing = this.billingAddress.defaultAddress
            this.activeAddress.shipping = this.shippingAddress.defaultAddress
        }
     });
   })();
</script>

问题：

1. 我怎么了？
2. 如何解决该错误？

注意：

我的Vue版本是2.6.10。

Answer 1

vue在数据范围内找不到$ vAddress，

您必须在$ vue数据启动器中标记并移动$ vAddress，例如下方：

   ... 
   data: {
      user: {!! json_encode(Auth::user()) !!},
      vAddress: {!! json_encode($vAddress) !!}
      billingAddress: {!! json_encode($billing_address) !!},
      shippingAddress: {!! json_encode($shipping_address) !!},
      newAddress: {},
      activeAddress: {
        shipping: '',
        billing: '',
      },
      alert: ""
    },
    ...

那么您应该能够在v-if中引用vAddress