来自 Laravel 时的 v-model 默认值答案

【问题标题】：v-model default value when it comes from Laravel来自 Laravel 时的 v-model 默认值
【发布时间】：2020-08-30 16:20:40
【问题描述】：

表单中的所有输入都通过 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>

如果有一个 value="{{ auth()->user()->first_name }}"，v-model 不显示默认值，所以我试图像这样解决这个问题

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

            loading: false
        };
    },

但我很确定这不是最好的方法。我试过寻找答案，但它们有点相同。最好的方法是什么？

【问题讨论】：

您正在使用 value 道具，以及 v-model，这是冲突的。 v-model 只不过是两个东西的组合，一个 value 属性和一个 input 事件监听器。在basic usage of v-model here 上阅读更多信息。第一个提示还提到，当使用v-model 时，value 属性将被忽略。
是的，我确实读过这个，但也许我不明白。那么我是否应该只使用该值并尝试以另一种方式将输入绑定到数据属性，而不是使用 v-model？
使用 v-model 进行绑定。你不需要使用 value 属性。
我愿意。这是一个设置表单，所以我已经在数据库中保存了来自 laravel 的值，如果有的话我想显示这些值

标签： laravel vue.js

【解决方案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
    };
},

当然还有另一种方法，您将用户数据放入刀片文件的窗口 DOM 对象 throw head 标记中。这里：

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

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

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

【讨论】：