Recently, I started working with Vue and encountered a problem while running the code below. The error message "
" keeps popping up. Despite my efforts to search for solutions online, I couldn't find any that addressed my specific issue.ReferenceError: $vAddress is not defined
<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>
Questions:
- What seems to be causing the issue?
- Any suggestions on how to resolve this error?
Note:
The version of Vue I am using is 2.6.10.