I cannot get a value to output in :value="myFunction(cur_path)"
no matter what. It’s always an object Promise
even though I’ve tried different ways to await the value from the async function. async fetch_dpids(x)
gets data from the API, I call that function in another function called async myFunction(x)
to await
the value and output it through :value=""
in the Vue HTML tags.
<k-accordion>
<k-accordion-item title="Best Paths">
<div>
<k-property-panel v-for="(path, index) in content">
<k-accordion-item :title=format_title(index,path['cost'])>
<k-property-panel-item v-for="(cur_path, path_index) in path['hops']"
v-if="content" :name="String(path_index)" :value="myFunction(fetch_dpids, cur_path)" :key="path_index">
</k-property-panel-item>
</k-accordion-item>
</k-property-panel>
</div>
</k-accordion-item>
</k-accordion>
</template>
<!-- :name="String(path_index)" holds the # count;
:value="cur_path" holds the switch/interface; e.g. 00:00:00:00:00:00:00:03
-->
<script>
module.exports = {
props: ["content"],
methods: {
format_title(index, cost){
return "Path " + index + ", cost: " + cost + ", hops: ";
},
async fetch_dpids(x) {
try {
const response = await fetch('/api/myAPI/topology/v3/interfaces');
const data = await response.json();
const dpids = Object.entries(data.interfaces).map(([key, value]) => {
let item = key;
if (item == x) { // troubleshooting
console.log(item + "HERE <-------");
}
if (value.name) {
item = `${value.name} - ${item} - ${value.mac}`;
}
return item;
});
this.dpids = dpids;
} catch (error) {
console.error(error);
}
},
async myFunction(fetch_dpids, x) { //recent addition
const result = await fetch_dpids(x);
return result; // logs the resolved value of the Promise
}
}, // end of method block here
data () {
return {
display: false,
paths: [],
headers: ["dpid"],
rows: [this.content]
}
}
}
</script>```
[Console log][1]
[object Promise][2]
[1]: https://i.stack.imgur.com/OpX7r.png
[2]: https://i.stack.imgur.com/msDgV.png