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

Question

我对使用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>

并且正在如下设置我的道具和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表单数据中？

Answer 1

通过将以下内容添加到我的[[EditTeamModal.vue，可以获取要更新的模态表单数据

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