Question

我一直在研究几个小时，我承认失败。我有一个列出一堆用户的页面，允许您重置用户密码。您单击用户的重置按钮，它会弹出一个模式框，其中包含密码重置表单。

我使用Vue.js来验证表单并提交它，所有这些都使用ajax（vue-resource）。用户列表和唯一模态由Laravel在刀片视图中生成。

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

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

谢谢！

Answer 1

多个组件实例实际上是要走的路。如果您在for循环中生成用户，请将用户标识作为组件的属性传递。

@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

页面上有多个表单

1 个答案: