v-model default value when it comes from Laravel - laravel

Question

All inputs in the form are bind via v-model to the data in the Vue component like this
<validation-provider name="first_name" rules="required" v-slot="{ failed, errors }" :debounce="500">
<input type="text"
id="first_name"
name="first_name"
placeholder="First name"
class="form-control"
:class="{'is-invalid' : failed}"
:disabled="loading"
value="{{ auth()->user()->first_name }}"
tabindex="1"
v-model.trim="user.first_name"
>
<div class="invalid-feedback" v-show="failed">
#{{ errors[0] }}
</div>
v-model doesn't show a default value if there is one value="{{ auth()->user()->first_name }}" so I'm trying to solve this issue like this
data() {
return {
user: {
first_name: document.querySelector("input[name=first_name]").value,
},
loading: false
};
},
But I'm very sure this is not the best way to do this. I've tried looking for an answer, but they are kinda the same. What's the best way to do this?

Answer 1

you have to find a way pass that user information to (vue)js. your solution isnt wrong but in vue.js we work with data or state so my solution is create custom component for this problem like:
// blade
<UserForm :data='#json(auth()->user())' />
// component data
data() {
return {
user: this.data,
loading: false
// and what ever you need
};
},
of course there is a another way and you put user data in window DOM object throw head tag of your blade file. here:
#auth
<script>
window.user = #json(auth()->user())
</script>
#endauth
then you can access it in you components:
data() {
return {
user: {
first_name: window.user.first_name
},
loading: false
};
},