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);
    }
},

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

1 个答案: