使用 Vue.js Prop 填充 vForm 数据？答案

【问题标题】：Use Vue.js Prop to populate vForm data?使用 Vue.js Prop 填充 vForm 数据？
【发布时间】：2020-09-24 07:33:37
【问题描述】：

我对使用 Laravel 和 Vue.js 还是很陌生，并且在尝试提交要以模式形式使用的数据时遇到了一些问题。

overview.vue正在显示一些信息并触发模态组件

我的模态元素：

<EditTeamModal :existing="existing_team"/>

在我的模板中，我触发了以下函数

@click="getExistingTeam(membership.team)"

触发以下方法：

getExistingTeam: function (team) {
    this.existing_team = team;
    this.$bvModal.show('edit_team');
},

EditTeamModal.vue 在我的模态组件中，我有几个输入，如下所示：

<div class="form-group row">
    <label for="name" class="col-md-4 col-form-label text-md-right">{{ $t('team.name') }} <span class="text-danger">*</span></label>
    <div class="col-md-8">
        <input type="text" v-model="form.name" :class="{ 'is-invalid': form.errors.has('name') }" class="form-control" id="name" name="name" required/>
        <has-error :form="form" field="name" />
        <small id="nameHelp" class="form-text text-muted">Unique name of your team (155 character limit).</small>
    </div>
</div>

我的 props 和 vForm 数据设置如下：

props: {
    existing: {
        type: Object,
        required: true, 
        default: {}
    }
},
//   middleware: 'auth',
data () {
    return {
        form: new Form({
            id: this.existing.id,
            name: this.existing.name,
            region: this.existing.region,
            website: this.existing.website,
            about: this.existing.about,
            membership_password: "",
            membership_password_confirmation: "",
            avatar: null,
        }),
    }
},

但是，我的表单输入总是空白...

我可以直接访问 this.exists.name 并获得正确的预期数据输出，但它似乎不会填充到我的表单字段中？！

有没有合适的方法将数据从 vue 属性中提取到 vForm 表单数据中？

【问题讨论】：

标签： vue.js vue-component laravel-5.8

【解决方案1】：

能够通过将以下内容添加到我的 EditTeamModal.vue

来更新模态表单数据

watch: {
    existing: function(val) {
        this.form.fill(this.existing);
    }
},

【讨论】：