Question

我在array中有以下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级别深array。

我想基于它生成一个select，子选项位于parent选项下面（递归）。我到处搜索，但找不到一个如何做到这一点的例子。你能告诉我有关如何做到这一点的任何提示吗？

想要生成的选择示例：

<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>

谢谢！

Answer 1

你的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;
    }
}

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

无论何时更改epics数组，计算器都会自行更新并为其提供展平版本。

在您的组件中，您可以对此计算属性执行v-for，它将根据您的需要呈现选择：

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

与Vuejs合作时，请多考虑操作数据以满足组件的需要，而不是考虑组件/视图中的某些疯狂逻辑。

Answer 2

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

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

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

<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>

但它需要适用于可变数量的嵌套级别。有什么指针吗？

在vue js中递归渲染选择

2 个答案: