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

Question

需要 el-dropdown 的帮助来解析 express 解析的内容 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）或其他内容的数字（名称）。 PS：据我了解，el-dropdown command="someCommand" 与 <a href> 类似。

Answer 1

加载数据时，您需要将其分配给本地组件数据 f。电子： this.getList = result.rows
必须在循环中创建下拉项（阅读 vue 文档中有关 v-for 指令的更多信息）： <el-dropdown-item @command="todo(item)" v-for="item in getList" :key="item. NAME">{{item.NAME}}</el-dropdown-item>
要处理来自上面一段代码的命令，您必须创建名为 todo 的本地方法。

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

parse contents from returned json to el-dropdown-item

json

vue.js

nuxt.js

element-ui