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

Question

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

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

我想知道它是否可以以某种方式使用组件呈现。但我不知道正确的方法。

坦率地说，我完全不知道如何使用 Vue.js 解决这个问题——从数组中渲染项目，每个项目都有自己的标记和属性（复选框有它自己的、文本框、选择、文本区域......）。

我正在构建一个基于 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>

我的想法是使用 CrudList 组件来 CRUD 列表...

<crud-list resource="orders">

在 laravel 我做这样的事情：

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'
            ]
        ],
    ],

]);

...它非常简化，但这只是我正在做的事情的一个例子。 现在的问题是：

• 从返回的数组项中取出“itemComponent”部分（这是在循环中），
• 如果是复选框，取（例如）Checkbox.vue 组件，用属性（数组项的“props”部分）填充它

我阅读了有关插槽的信息，但这不是我想要的。有什么东西可以用于动态组件吗？

Answer 1

查看动态表单的这个 jsFiddle 工作示例： https://jsfiddle.net/mani04/kr8w4n73/1/

您可以通过为您可能从服务器获得的每种表单元素类型使用大量 v-ifs 来轻松完成此操作。有点麻烦但是我找不到其他方法了。

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

var formItems = [{
    input_type: "text",
    input_label: "Login",
    values: {
        value: "your_name@example.com"
    }
},
{...},
{...}];

一旦你有了这些数据，接下来就是遍历formItems，检查input_type 并激活相关的表单控件。

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

<div v-for="formItem in formValues">
    <div v-if="formItem.input_type == 'text'">
        <input type="text" v-model="formItem.values.value">
    </div>
    <div v-if="formItem.input_type == 'password'">
        <input type="password" v-model="formItem.values.value">
    </div>
    <div v-if="formItem.input_type == 'checkbox'">
        <input type="checkbox" v-model="formItem.values.checked">
        {{formItem.values.label}}
    </div>
</div>

我的 jsFiddle 示例使用引导程序中的 form-horizontal，并且我也能够很好地显示标签。如果我把它放在上面的例子中，它会变得混乱，不会让你看到它是如何工作的。

希望对您有所帮助！您可以根据需要更改formItems 数据结构，并相应地修改模板。