一个页面上的多个表单

Question

我已经研究了几个小时了，我认输了。我有一个页面列出了一堆用户并允许您重置用户密码。您单击用户的重置按钮，它会弹出一个带有密码重置表单的模式框。

我使用 Vue.js 验证表单并提交，全部使用 ajax (vue-resource)。用户列表和唯一模式由 Laravel 在 blade 视图中生成。

我的问题是，如何为页面上的每个表单创建唯一的 Vue 实例（或我应该做的任何事情）？

我的调查建议使用组件，但我似乎无法让它工作，所以不确定这样做是否正确，因为我仍然会在页面上多次使用相同的组件？（并且每个表单都有唯一的数据（用户 ID））。

谢谢！

Answer 1

多组件实例实际上是可行的方法。如果您在 for 循环内生成用户，请将用户 ID 作为组件的属性传递。

@foreach ($users as $user)
    <form-component id="{{ $user->id }}"</form-component>
@endforeach

var FormComponent = Vue.extend({
        template: '<form> \
        <input name="user-{{id}}"></input>\
        <button>Submit</button> \
        </form>',
    props: ['id'],
});

Passing Data with Props

一个页面上的多个表单

Multiple forms on a page

vue.js