Question

我是VueJS的新手，我面临的问题本来可以用jQuery轻松解决，但是即使我确定有VueJS，也找不到。

我有一个由用户选择的路径列表，对于每个路径，我将在该div中创建一个带有3个复选框的div：添加，编辑和删除。

假设我有2条路径：'/foo' and '/bar'，对于这2条路径，我正在创建3个复选框：为每个路径添加，编辑和删除。如果用户选择添加，编辑和第一个路径，并且仅检查第二个路径上的删除，那么我想以编程方式构建以下对象：

[
{path: '/foo', actions: ["add","edit"]}, 
{path: '/bar' , actions: ["delete"]}
]

当用户按下最后的提交按钮时，将在最后调用创建此对象的函数，以下是一些相关代码：

在组件模板中：

<li v-for = "selectedPath in newProfile.paths">
                <Card :card-name="selectedPath">
                    <h5>{{selectedPath}}</h5>
                    <base-checkbox :data-path="selectedPath" type = "default" name = "add">Ajout</base-checkbox>
                    <base-checkbox :data-path="selectedPath" name = "edit">Edition</base-checkbox>
                    <base-checkbox :data-path="selectedPath" name = "delete">Supression</base-checkbox>
                </Card>
            </li>

JS代码包含用于选择复选框的普通JS，但问题是我正在使用模板所附带的组件复选框，因此除非获得每个复选框组件中的内容，否则无法获取被选中的属性。这很快变得很丑陋，而且使用非vuejs。

那么我该如何实现（基于每个div中的复选框构建该对象）？

Answer 1

您需要监听base-checkbox组件上的事件，并相应地更新合适的数据结构。在Vue中，DOM是次要的，事实的主要来源是JavaScript数据。

根据给定方案中最有意义的数据结构，有许多不同的处理方法。引用神话般的月：

表示形式是编程的本质。

考虑到这一点，我不相信我在下面构建的示例必然使用最佳的数据结构来表示数据，或者甚至我正在使用那些可以使用的数据结构

一些注意事项：

计算的属性out以完成的格式保存数据，该格式是单击提交按钮时使用的格式。我还没有包含“提交”按钮，我只是转储了这些数据，以便您可以看到它。
严格要求不要paths和selectedPaths分开，但是它看起来更接近原始代码，paths与newProfile.paths类似。
selectedPaths中的格式为{path1: {add: true, edit: false, delete: true}, path2: ...}。这些属性是延迟创建的，默认情况下所有复选框均为false。
由于selectedPaths最初是创建为空的，因此其属性将不会起作用。这就是使用$set的原因。如果可以在data方法中预填充此对象，则不必使用$set。
我为复选框使用了HTML <input>元素，但是对于复选框组件，方法完全相同。道具传递当前值，并在值更改时使用事件更新数据。
当使用这样的v-for时，为孩子拆分一个单独的孩子组件通常更简单。无需在父级中处理复杂的数据结构，而是可以将某些工作分担给每个子级。我在这里没有做这件事，因为我试图将所有内容都保留在一个组件中，但是如果我确实进行此操作，我将对此进行探索。

<template>
    <div>
        <ul>
            <li v-for="path in pathsWithSelections" :key="path.path">
                {{ path.path }}
                <input type="checkbox" :checked="path.add" @input="onChecked(path.path, 'add')">
                <input type="checkbox" :checked="path.edit" @input="onChecked(path.path, 'edit')">
                <input type="checkbox" :checked="path.delete" @input="onChecked(path.path, 'delete')">
            </li>
        </ul>
        {{ out }}
    </div>
</template>

<script>
    export default {
        data () {
            return {
                paths: ['path1', 'path2', 'path3'],
                selectedPaths: {}
            }
        },

        computed: {
            pathsWithSelections () {
                return this.paths.map(path => {
                    const selected = this.selectedPaths[path] || {}

                    return {
                        path,
                        ...selected
                    }
                })
            },

            out () {
                const out = []

                for (const path of this.pathsWithSelections) {
                    const actions = []

                    for (const action of ['add', 'edit', 'delete']) {
                        if (path[action]) {
                            actions.push(action)
                        }
                    }

                    if (actions.length) {
                        out.push({
                            path: path.path,
                            actions
                        })
                    }
                }

                return out
            }
        },

        methods: {
            onChecked (path, action) {
                const selectedPaths = this.selectedPaths

                const selected = selectedPaths[path] || {}

                this.$set(selectedPaths, path, selected)
                this.$set(selected, action, !selected[action])
            }
        }
    }
</script>

如何使用VueJS

1 个答案: