Vue Js，v-for循环，从深度Json数组中获取值答案

【问题标题】：Vue Js, v-for loop, get values from deep Json arrayVue Js，v-for循环，从深度Json数组中获取值
【发布时间】：2020-10-18 11:23:13
【问题描述】：

首先我从 websocket 连接中获取数据并解析它以放入我的状态。

this.connection.onmessage = (message) => {
    let messageData = JSON.parse(message.data);
        commit("UPDATE_MESSAGES", messageData);  
    };

然后在我的组件中，我在计算属性中获取数据

computed: {
   messages() {
      return this.$store.getters.getMessages
      },   
    },

数据看起来像这样

{
    "op": "utx",
    "x": {
        "lock_time": 0,
        "ver": 1,
        "size": 405,
        "inputs": [
        {
            "sequence": 4294967295,
            "prev_out": {
                "spent": false,
                "tx_index": 0,
                "type": 0,
                "addr": "3Noh57x1AJqoUnZcBdavASbZS8JgH2YSV9",
                "value": 12677037,
                "n": 1,
                "script": "a914e79dd0f494dfe5a26c992d68ca1e29ac9ef6a34b87"
            },
            "script": "2200206b037d5a1989c15bbab85168c2b1bcff8467ec391721340c2870bdd94d33239d"
        },
        {
            "sequence": 4294967295,
            "prev_out": {
                "spent": false,
                "tx_index": 0,
                "type": 0,
                "addr": "3Noh57x1AJqoUnZcBdavASbZS8JgH2YSV9",
                "value": 12677037,
                "n": 1,
                "script": "a914e79dd0f494dfe5a26c992d68ca1e29ac9ef6a34b87"
            },
            "script": "2200206b037d5a1989c15bbab85168c2b1bcff8467ec391721340c2870bdd94d33239d"
        }
        ],
        "time": 1602967525,
        "tx_index": 0,
        "vin_sz": 1,
        "hash": "9419d9b14da428e0a47c4e9acf0f5f918bb5149c01fa555ba87a9056dfe6383a",
        "vout_sz": 2,
        "relayed_by": "",
        "out": [
            {
            "spent": false,
            "tx_index": 0,
            "type": 0,
            "addr": "3J11Sdr98GuxN4eq1Ny1PYReJjSP19jxab",
            "value": 12664662,
            "n": 0,
            "script": "a914b2e91923543e02cba551ed26f92472c62004fd8b87"
        }, {
            "spent": false,
            "tx_index": 0,
            "type": 0,
            "addr": "33n6iCpSYDYF2oSvTnmKz8XgyJE8PFcHtV",
            "value": 8900,
            "n": 1,
            "script": "a91416e653dc0817153852b8c8048dd9c130cca0113787"
        }
        ]
    }
}

以及我如何从服务器获取它，所以我无法在服务器端更改它。

然后我想在我的模板中显示一些数据中的值，我显示了一些，但不是我需要的深度。

<div class="transaction__block" v-for="message in messages" :key="message.id">
    <div v-for="x in message.x" :key="x.id">
        {{x}}
        <div v-for="input in x.inputs" :key="input.id">
          {{input}}
        </div>
    </div>
</div>

我可以显示{{x}}，但无法深入到input。

在我的情况下，我需要在每个输入中显示 x.inputs.addr 然后x.out.addr 和x.out.value 在每一个输出

请帮忙

【问题讨论】：

嗨，我认为你实际上不能 v-for x in message.x 因为我可以从你的示例数据中看到，它不是一个实际的数组，它是一个对象。另外x.inputs.addr 无效，看来需要input.prev_out.addr。从你的数据。 x.out[index].addr 和 x.out[index].value 应该提供您的数据
感谢您的回答，您能否提供完整的代码示例，我需要怎么做？

标签： javascript arrays vue.js

【解决方案1】：

好吧，让我试试看 =)

// your code... 
  <div v-for="(input, index) in message.x.inputs" :key="index">//here input doesn't have an id attribute so use index instead?
    <p>{{ input.prev_out.addr }}</p>
    <p>{{ message.out[index].addr }}</p>
    <p>{{ message.out[index].value }}</p>
  </div>
</div> 
//...

我猜这样你可以得到ìnput.prev_out.addr，如果它们与out[index].addr对齐，值应该匹配=)

【讨论】：