Arrays 在vue js中递归呈现选择

我在

Vue.js

中有以下

数组

：

 epics: {
        1: {'text' : 'Epic 1', 'value' : 1, 'children' : {
                1: {'text' : 'Subepic 1', 'value' : 4},
                2: {'text' : 'Subepic 2', 'value' : 5},
                3: {'text' : 'Subepic 3', 'value' : 6},
            }
        },
        2: {'text' : 'Epic 2', 'value' : 2},
        3: {'text' : 'Epic 3', 'value' : 3}
    },

它可以是

n

level deep

array

我想基于它生成一个select，子选项位于父选项下面（递归）。我到处都找过，但找不到一个例子来说明如何做到这一点。 你能告诉我怎么做吗

想要生成的选择示例：

<select>
   <option>Epic 1</option>
   <option>Subepic 1</option>
   <option>Subepic 2</option>
   <option>Subepic 3</option>
   <option>Epic 2</option>
   <option>Epic 3</option>
<select>

史诗1
亚史诗1
次级史诗2
亚史诗3
史诗2
史诗3

谢谢大家!

您的

epics

“数组”实际上不是数组，而是对象。首先，我将其更改为实际数组：

epics: [
    {
        text: 'Epic 1', 
        value: 1,
        children:[ 
            {text : 'Subepic 1', value : 4},
            {text : 'Subepic 2', value : 5},
            {text : 'Subepic 3', value : 6},
        ]
    },
    {
        text : 'Epic 2', 
        value : 2
    },
    {
        text : 'Epic 3', 
        value : 3
    }
],

请注意方括号而不是花括号

然后，您可以定义一个计算属性，该属性将返回epics数组的展开版本：

computed: {
    flatted: function() {
        return this.flat(this.epics);
    }
},

methods: {
    flat(items) {
        var final = []
        var self = this
        items.forEach( function(item) {
            final.push(item)

            if (typeof item.children !== 'undefined') {
                final = final.concat(self.flat(item.children));
            }
        })

        return final;
    }
}

computed属性将调用flat方法，该方法将处理您的数组并构建一个包含所有顶级子级的新数组

每当您更改epics数组时，计算机将更新自身，并为您提供它的展开版本

在您的组件中，您可以对该计算属性执行

v-for

，它将根据需要呈现选择：

<select>
    <options v-for="item in flatted">{{item.text}}</option>
</select>

{{item.text}

使用VUEJ时，请更多地考虑如何操作数据以满足组件的需要，而不是考虑组件/视图中的某些疯狂逻辑。

您的

epics

“数组”实际上不是数组，而是对象。首先，我将其更改为实际数组：

epics: [
    {
        text: 'Epic 1', 
        value: 1,
        children:[ 
            {text : 'Subepic 1', value : 4},
            {text : 'Subepic 2', value : 5},
            {text : 'Subepic 3', value : 6},
        ]
    },
    {
        text : 'Epic 2', 
        value : 2
    },
    {
        text : 'Epic 3', 
        value : 3
    }
],

请注意方括号而不是花括号

然后，您可以定义一个计算属性，该属性将返回epics数组的展开版本：

computed: {
    flatted: function() {
        return this.flat(this.epics);
    }
},

methods: {
    flat(items) {
        var final = []
        var self = this
        items.forEach( function(item) {
            final.push(item)

            if (typeof item.children !== 'undefined') {
                final = final.concat(self.flat(item.children));
            }
        })

        return final;
    }
}

computed属性将调用flat方法，该方法将处理您的数组并构建一个包含所有顶级子级的新数组

每当您更改epics数组时，计算机将更新自身，并为您提供它的展开版本

在您的组件中，您可以对该计算属性执行

v-for

，它将根据需要呈现选择：

<select>
    <options v-for="item in flatted">{{item.text}}</option>
</select>

{{item.text}

---

在使用VUEJ时，请更多地考虑如何操作数据以满足组件的需要，而不是考虑组件/视图中的一些疯狂逻辑。

我也有同样的问题，但是我不想平展数据，因为我希望在每个级别将选项文本的显示缩进特定的数量，因此，层次结构在视觉上是显而易见的

我认为这可以通过递归组件实现，但我不太确定如何实现——我尝试过使用递归组件，但无法使其正常工作

基本上，我希望通过嵌套数据实现以下结构：

<select>
    <option class="level-0">Epic 1</option>
    <option class="level-1">Subepic 1</option>
    <option class="level-1">Subepic 2</option>
    <option class="level-1">Subepic 3</option>
    <option class="level-0">Epic 2</option>
    <option class="level-0">Epic 3</option>
</select>

史诗1
亚史诗1
次级史诗2
亚史诗3
史诗2
史诗3

---

但它需要为不同数量的嵌套级别工作。有指针吗？

我也有同样的问题，但是我不想将数据展平，因为我希望在每个级别将选项文本的显示缩进特定的数量，以便层次结构在视觉上清晰可见

我认为这可以通过递归组件实现，但我不太确定如何实现——我尝试过使用递归组件，但无法使其正常工作

基本上，我希望通过嵌套数据实现以下结构：

<select>
    <option class="level-0">Epic 1</option>
    <option class="level-1">Subepic 1</option>
    <option class="level-1">Subepic 2</option>
    <option class="level-1">Subepic 3</option>
    <option class="level-0">Epic 2</option>
    <option class="level-0">Epic 3</option>
</select>

史诗1
亚史诗1
次级史诗2
亚史诗3
史诗2
史诗3

---

但它需要为不同数量的嵌套级别工作。有指针吗？

是的，它可以工作，但我做了服务器端，并将阵列发送回vue已展平，thx用于创意。是的，它可以工作，但我做了服务器端，并将阵列发送回vue已展平，thx用于创意。