Initially, I receive data from a websocket connection and parse it to store in my state.
this.connection.onmessage = (message) => {
let messageData = JSON.parse(message.data);
commit("UPDATE_MESSAGES", messageData);
};
Next, in my component, I access the data through a computed property:
computed: {
messages() {
return this.$store.getters.getMessages
},
},
The data structure is as follows:
{
"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"
},
...
}
}
This is how the data is received from the server, and it cannot be modified on the server side.
I want to display certain values from the data in my template, but I am having trouble accessing deeper nested levels.
<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 display {{ x }}, but I'm unable to go deeper into {{ input }}.
In my scenario, I need to display x.inputs.addr for every input and then x.out.addr and x.out.value for every out.
Any assistance would be appreciated.