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

Question

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

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

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

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

我正在构建一个基于 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-if 来轻松完成此操作。有点麻烦，但我找不到其他方法。

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

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 示例使用 bootstrap 中的 form-horizontal，我也能够很好地显示标签。如果我把它放在上面的例子中，它会变得混乱并且不会让你看到它是如何工作的。

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

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

Vue.js 2 - retrieve form elements from server and render CRUD

javascript

vue.js

vue-component