Javascript Vue.js 2-从服务器检索表单元素并呈现CRUD

我是Vue.js新手，我的任务是：

• 使用RESTfulAPI（后台的Laravel）对服务器进行ajax调用（GET）
• 检索数组中表单CRUD项（如复选框、输入文本、文本区域…）的（JSON）列表及其属性（值、选中项、自定义类…）
• 使用这些表单项渲染CRUD表单，可能使用Vue的循环

我想知道它是否可以使用组件进行渲染。但是我不知道正确的方法

坦白地说，我不知道如何使用Vue.js解决这个问题-从数组中呈现项目，每个项目都有自己的标记和属性（复选框有自己的、textbox、select、textarea…）

我正在基于CRUD操作构建一个web应用程序，并尝试编写通用组件。最简单的方法是为每个子页面编写一个具有硬编写子组件的特殊组件，但如果不需要，我不喜欢这种方法

谢谢大家!

---

编辑：我没有太多的代码，但这是我的地方

<script>
// ./components/CrutList.vue
    export default {
        mounted() {},

        data() {
            return {
                items: []
            }
        },

        props: ['resource'],

        methods: {
            getItems() {
                var resource = this.$resource('api/'+this.resource+'{/id}');

                resource.get({}).then(function(items){
                    if(items.body.status == 'success'){
                        this.items = items.body.items;
                    }
                }).bind(this);
            },

            deleteItem(item) {
                // perform CRUD operation DELETE
                alert('delete action');
            }
        }
    }
</script>

…这很简单，但这只是我正在做的一个例子。 现在的问题是：

• 从返回的数组项中获取“itemComponent”部分（这是一个循环）
• 如果是复选框，则以（例如）checkbox.vue组件为例，用属性（数组项的“props”部分）填充它

---

我读过关于吃角子老虎机的书，但这不是我想要的。有什么东西可以用于动态组件吗？

请查看动态表单的JSFIDLE工作示例：

通过对从服务器获得的每个表单元素类型使用大量的

v-if

s，您可以轻松地完成这项工作。这有点麻烦，但我找不到其他办法

在上面的示例中，我的表单结构如下：

var formItems=[{
输入类型：“文本”，
输入标签：“登录”，
价值观：{
价值观：“你的_name@example.com"
}
},
{...},
{...}];

一旦有了这些数据，就需要迭代

表单项

，检查

输入类型

，并激活相关表单控件

对于上述输入，我的动态表单模板如下所示：

{{formItem.values.label}

我的jsiddle示例使用了bootstrap中的

表单水平

，我还能够很好地显示标签。如果我把它放在上面的例子中，它会变得杂乱无章，不会让你看到它是如何工作的

---

希望有帮助！您可以更改

formItems

数据结构以满足您的需要，并相应地修改模板。

我添加了一些代码，但事实是我还没有太多的代码……它可以正常工作。非常感谢你。也许我必须想得更简单一些：）这是我努力实现的目标的一个很好的答案。也许真的没有必要将每个表单元素都作为独立的组件…@Michaelo感谢您的反馈：-）这对我来说是一个巨大的挑战，我可以在未来的一些应用程序中使用它。我非常感谢您的努力，并愿意分享这种解决问题的方法。JSFIDLE真的帮了大忙！：）我希望它能帮助其他人创建这样的应用程序。这种方法可以避免重复代码。这很简单也很好！非常感谢。

<crud-list resource="orders">

return response()->json([
    'status' => 'success',
    'items' => [
        [
            'itemComponent' => 'checkbox',
            'props' => [
                'checked' => true,
                'label' => "Checkbox č.1",
                'name' => 'checkbox1'
            ]
        ],
        [
            'itemComponent' => 'checkbox',
            'props' => [
                'checked' => true,
                'label' => "Checkbox č.2",
                'name' => 'checkbox2'
            ]
        ],
        [
            'itemComponent' => 'checkbox',
            'props' => [
                'checked' => true,
                'name' => 'checkbox3'
            ]
        ],
    ],

]);