Как присвоить laravel значение, подобное этому {{ auth->()->user()->first_name }}
в этом vuejs текстовом поле
<input v-model="user.first_name" type="text"
class="form-control form-control-lg rounded-0" :value="{{ auth()->user()->first_name }}">
Вот оригинал html show.blade.php
<form class="my-3 font-sans-serif">
<div class="form-group">
<label for="" class="font-weight-semibold text-uppercase">First Name*</label>
<input v-model="user.first_name" type="text"
class="form-control form-control-lg rounded-0">
<span class="text-danger text-xs">@{{ errors.first_name }}</span>
</div>
<div class="form-group">
<label for="" class="font-weight-semibold text-uppercase">Last Name</label>
<input v-model="user.last_name" type="text"
class="form-control form-control-lg rounded-0">
<span class="text-danger text-xs">@{{ errors.last_name }}</span>
</div>
<div class="form-group">
<label for="" class="font-weight-semibold text-uppercase">Email*</label>
<input v-model="user.email" type="email"
class="form-control form-control-lg rounded-0">
<span class="text-danger text-xs">@{{ errors.email }}</span>
</div>
<div class="form-group">
<label for="" class="font-weight-semibold text-uppercase">Phone</label>
<input v-model="user.phone" type="text"
class="form-control form-control-lg rounded-0">
<span class="text-danger text-xs">@{{ errors.phone }}</span>
</div>
<button @click.prevent="submit" class="btn btn-primary w-100 text-white mt-4 mb-3">
Submit
</button>
</form>
Я новичок в vuejs.
Примечание. Этот laravel код {{ auth->()->user()->first_name }} имеет допустимое значение, поскольку используемый пользователь вошел в систему.
I нужно изучить vuejs Я знал только основы.
Вот код showvue.js
const app = new Vue({
el: '#property-booking',
data: {
units: units,
guest: 2,
dates: [],
selectedDates: [],
rates: [],
user: {
first_name: '',
last_name: '',
email: '',
phone: ''
},
errors: {
first_name: '',
last_name: '',
email: '',
phone: ''
},
step: 1,
type: 1,
currency: {
symbol: '$',
rate: 1
},
minDays: 0
},
created() {
//some on create
},
methods: {
submit() {
let hasError = false;
const simpleValidate = (field, message) => {
if (this.user[field] === '') {
hasError = true;
this.errors[field] = message;
} else this.errors[field] = '';
};
const checkBot = (field, message) => {
var expression = /(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})/gi;
var regex = new RegExp(expression);
var expression1 = /[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)?/gi;
var regex1 = new RegExp(expression1);
if(field == 'email'){
var expression = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;
var regex = new RegExp(expression);
if (!this.user[field].match(regex)) {
hasError = true;
this.errors[field] = message;
} else this.errors[field] = '';
}else{
if (this.user[field].match(regex) || this.user[field].match(regex1)) {
hasError = true;
this.errors[field] = message;
} else this.errors[field] = '';
}
};
simpleValidate('first_name', 'Please enter your first name');
simpleValidate('email', 'Please enter your email address');
if(hasError == false){
checkBot('first_name', 'Please input valid data');
checkBot('last_name', 'Please input valid data');
checkBot('phone', 'Please input valid data');
checkBot('email', 'Please input valid data');
}
if (hasError) return;
const dates = this.selectedDates.sort((a, b) => a.getTime() - b.getTime());
const currency = Object.keys(rates).find(rate => rates[rate].symbol === this.currency.symbol);
axios.post(sBaseURI + '/property-requests', {
property_id: this.unit.property_id,
dates: {
start: dates[0],
end: dates.reverse()[0]
},
amount: this.price,
guests: this.guest,
user: this.user,
type: this.type,
currency : currency
}).then(res => {
this.previousStep();
this.reset();
this.$refs.datepicker.start = '';
this.$refs.datepicker.end = '';
swal({
'title': "We have received your inquiry.",
'text': 'An EliteLYFE Travel Designer will contact you shortly.',
'type': "success",
'showCancelButton': false,
'showConfirmButton': true,
'allowOutsideClick': false,
'closeOnConfirm': false
}, function () {
window.location = res.data;
swal.disableButtons();
});
}).catch(err => {
console.log(err);
swal('Something went wrong', 'Please make sure all the fields are properly filled', 'error')
})
},
reset() {
//reset codes......
},
incrementGuest() {
//increment guest .....
},
decrementGuest() {
// decrement guest .....
},
generateDateBetween(start, end) {
// generateDate codes ...
}
},
components: {
Datepicker
}
});
Я просто пытаюсь включить авто заполните значение следующего
{{ auth->()->user()->first_name }}{{ auth->()->user()->last_name }}{{ auth->()->user()->email}}{{ auth->()->user()->phone }}