来自Laravel的v-model默认值

Question

表单中的所有输入都通过v-model绑定到Vue组件中的数据，如

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

如果存在一个值＝"0"，则v-model不显示默认值；｛｛auth((->user((->first_name｝｝"所以我正试图像这个一样解决这个问题

data() {
return {
user: {
first_name: document.querySelector("input[name=first_name]").value,
},
loading: false
};
},

但我确信这不是最好的方法。我试着寻找答案，但它们有点一样。最好的方法是什么？

Answer 1

您必须找到一种方法将用户信息传递给(vue(js。你的解决方案没有错，但在vue.js中，我们处理数据或状态，所以我的解决方案是为这个问题创建自定义组件，比如：

// blade
<UserForm :data='@json(auth()->user())' />
// component data
data() {
return {
user: this.data,
loading: false
// and what ever you need
};
},

当然还有另一种方法，您可以将用户数据放在blade文件的windowDOM对象throw-head标记中。此处：

@auth
<script>
window.user = @json(auth()->user())
</script>
@endauth

然后你可以在你的组件中访问它：

data() {
return {
user: {
first_name: window.user.first_name
},
loading: false
};
},