将返回的 JSON 中的内容解析为 el-dropdown-item

Question

需要 el-dropdown 的帮助来解析快速解析的 json 中的内容。

尝试 https://medium.com/html-all-the-things/hatt-vue-js-2-9b34557f0305 本教程，似乎没有从 JSON 解析内容的选项。

/*dropdown in index.vue, simplified*/
<el-dropdown>
<el-button type="primary" trigger="click">dropList<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu>
<el-dropdown-item command="someCommandWhichIsNotYetWritten">{{getList}}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
/*script*/
export default {
data() {
return {
getList: []
}
}
/*The returning JSON is as follows*/
result {
metaData: [ { name: 'NAME' } ],
rows: [
{ NAME: '131' },
{ NAME: '132' },
{ NAME: '138' },
{ NAME: '139' },
{ NAME: '142' },
{ NAME: '193' },
{ NAME: '194' },
{ NAME: '235' },
{ NAME: '241' },
{ NAME: '44' }
]
}

PS：我知道这些评论行并非在所有情况下都有效。只是添加以澄清我所做的。

在此代码中，我看到了 JSON 的所有内容，但我想单独列出连接到命令(href)或其他东西的数字 (NAME)。 PS：据我了解el-dropdown command="someCommand"类似于<a href>或其他东西。

Answer 1

1. 加载数据时，需要将其分配给本地组件数据，f. e：this.getList = result.rows

2. 下拉项必须在循环中创建(在 vue 文档中阅读有关 v-for 指令的更多信息)：<el-dropdown-item @command="todo(item)" v-for="item in getList" :key="item. NAME">{{item.NAME}}</el-dropdown-item>

3. 要处理上述代码段中的命令，您必须创建名为todo的本地方法。