Vue Js, v-for loop, get values from deep Json array

Question

At first I get data from websocket connection and parse it to put in my state.

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

Then in my component I get data in computed property

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

Data looks like that

{
    "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"
        }
        ]
    }
}

And that how I get it from server, so no way I can change it on server side.

Then I want to show some values from data in my template, and I show some, but not deep like I need.

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

I can show {{x}} , but can`t get deeper to input.

In my case I need to show x.inputs.addr in every input then x.out.addr and x.out.value in every out

Please any help

Answer 1

Well here let me try it out =)

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

I'm guessing this way you could get ìnput.prev_out.addr and if they lined with out[index].addr, values should match =)