Javascript 无法使用Vue验证表单

我是Vue的新手，我有以下代码要运行，但它给出了

参考错误：$vAddress未定义

错误。我在谷歌上搜索过，但似乎找不到任何解决问题的方法

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

名字
第一个名字是必需的
（功能（）{
var帐户=新的Vue({
el:“#签出内容”，
数据：{
用户：{！！json_encode（Auth:：user（））！！}，
账单地址：{！！json\u encode（$billing\u address）！！}，
shippingAddress:{！！json_encode（$shipping_address）！！}，
新地址：{}，
活动地址：{
运输：''，
账单：''，
},
警报：“
},
计算：{
装运：功能（）{
return！（typeof this.activeAddress.billing='undefined'| | typeof this.activeAddress.shipping=='undefined'）；
}       
},
过滤器：{
isExist:函数（值）{
if（typeof value==='undefined'）返回“”；
返回值；
}
},
方法：{
//保存新地址
saveAddress:function（）{
//保存新地址
if（typeof this.newAddress.key==“未定义”）{
if（typeof this.user.data.address==“未定义”）
此.set（'user.data.address'，[]）；
if（this.newAddress.defaultAddress）{
这个.clearDefaultAddress（）；
}
this.user.data.address.push（this.newAddress）；
}否则{
var key=this.newAddress.key；
if（this.newAddress.defaultAddress）{
这个.clearDefaultAddress（）；
}
this.user.data.address[键]=this.newAddress；
}
这是.$http.post（“{route（'account-addresses'）}”{
地址：this.user.data.address
})。然后（（响应）=>{
this.user.data.address=response.body.user.data.address；
美元。通知({
消息：response.body.message
},{
键入：“成功”，
制作动画：{
输入：“动画fadeInDown”，
退出：“动画淡出”
},
});
//重置值
$（“#新地址”）.modal（'hide'）；
this.newAddress=''；
}，（响应）=>{}）；
},
//更新地址
updateAddress:函数（地址、索引）{
this.newAddress=地址；
this.newAddress.key=索引；
this.user.data.address[索引]=''；
$（'新地址'）.modal（'显示'）；
},
clearDefaultAddress:函数（）{
//将所有默认值清除为“无”
for（var i=0；i{
//推进下一步
window.location='{url（'checkout/shipping'）}}'；
}，（回应）=>{
});
}
}
},
就绪（）{
//设置默认地址
this.activeAddress.billing=this.billingAddress.defaultAddress
this.activeAddress.shipping=this.shippingAddress.defaultAddress
}
});
})();

问题：

我有什么问题

我如何修复错误

注:

---

我的Vue版本是

2.6.10

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

感谢您的回答，首先，没有

vAddress

数据，这是用户需要定义的地址。其次，我将

vAddress:{firstname:{required:true}}

放在数据中，但这并没有解决问题。我的错误。你在用什么？如果是这样，那么在启动vue并在模板中使用$v引用验证器时，您需要定义验证对象。请考虑按照中的原则重写您的问题