主页 / 问题 / 1088037
Accepted
Dip
Asked:2020-02-27 14:33:41 +0000 UTC2020-02-27 14:33:41 +0000 UTC

在 vue js 中遍历所需（排序）对象、数组

  • 772

vue js中如何只通过id键选择，只返回值，不使用v-for，if等。vue js项目脚本中只有js

{
"data": {
"status": 0,
"response": [
{
"id": "m",
"desc": "Ст 1",
"nodes": [
{
"id": "A",
"role": "AB",
"desc": "Бака 1",
"url": "http://1927"
},
{
"id": "A2",
"role": "AB",
"desc": "Ба 2",
"url": "1927"
},
{
"id": "RB",
"role": "RB",
"desc": "БО",
"url": "1927"
},
{
"id": "M1",
"role": "MЧ",
"desc": "MЧ 1",
"url": "1927"
},
{
"id": "M2",
"role": "MЧ",
"desc": "MЧ 2",
"url": "1927"
}
]
},
{
"id": "d",
"desc": "Ст",
"nodes": [
{
"id": "A1",
"role": "AB",
"desc": "Ба 1",
"url": "1927"
},
{
"id": "A2",
"role": "ABS",
"desc": "Ба 2",
"url": "1927"
},
{
"id": "RB",
"role": "RB",
"desc": "РБ",
"url": "1927"
},
{
"id": "MЧ",
"role": "MЧ",
"desc": "MЧ",
"url": "1927"
}
]
}
]
}

您需要将结果放入数组：[]，

通过数组“id”：“m”

A
A2
RB
M1
M2
javascript

1 个回答

  1. Best Answer

    如果我理解正确并且您需要一个数组 [A, A2, RB, M1, M2] 作为输出，那么这里是 Vue 中的一个粗略实现，（您在数据中的初始对象：示例字段），如果您需要在模板中使用过滤后的数据，将 test() 移至计算。

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
  <!-- DO NOT touch the following DIV -->
  <div id="app">
    <button @click="test()">Клик</button>
    <p></p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const app = new Vue({
        el: '#app',
        data: {
          example:
            {
              data: {
                status: 0,
                response: [
                  {
                    id: 'm',
                    desc: 'Ст 1',
                    nodes: [
                      {
                        id: 'A',
                        role: 'AB',
                        desc: 'Бака 1',
                        url: 'http://1927',
                      },
                      {
                        id: 'A2',
                        role: 'AB',
                        desc: 'Ба 2',
                        url: '1927',
                      },
                      {
                        id: 'RB',
                        role: 'RB',
                        desc: 'БО',
                        url: '1927',
                      },
                      {
                        id: 'M1',
                        role: 'MЧ',
                        desc: 'MЧ 1',
                        url: '1927',
                      },
                      {
                        id: 'M2',
                        role: 'MЧ',
                        desc: 'MЧ 2',
                        url: '1927',
                      },
                    ],
                  },
                  {
                    id: 'd',
                    desc: 'Ст',
                    nodes: [
                      {
                        id: 'A1',
                        role: 'AB',
                        desc: 'Ба 1',
                        url: '1927',
                      },
                      {
                        id: 'A2',
                        role: 'ABS',
                        desc: 'Ба 2',
                        url: '1927',
                      },
                      {
                        id: 'RB',
                        role: 'RB',
                        desc: 'РБ',
                        url: '1927',
                      },
                      {
                        id: 'MЧ',
                        role: 'MЧ',
                        desc: 'MЧ',
                        url: '1927',
                      },
                    ],
                  },
                ],
              },
            },
        },
        methods: {
          test:function () {
            const arr = [];
            const keys = Object.keys(this.example.data.response);
            const values = Object.values(this.example.data.response);
            for (let i = 0; i < keys.length; i += 1) {
              if (values[i].id === 'm') {
                for (let node = 0; node < values[i].nodes.length; node += 1) {
                  arr.push(values[i].nodes[node].id);
                }
              }
            }
            alert(arr);
            return arr;
          },
        }
    })
  </script>
  </body>
</html>

    • 0

相关问题