Vue 3 prop issue - json

Question

i have an api that returns some json with a list of vendors and i want to pass an array of just the names of the items in the json into a sfc vue component as a prop.
for some reason this isnt working and i dont know why
the parent component should be passing in the array of vendor names in to the child component to be used as the options for a dropdown menu
parent component:
<template>
<div>
<h1 class="title">Catalog</h1>
<dtable v-bind:tableData="products" v-bind:vendors="vendor_names"></dtable>
</div>
</template>
<script>
import axios from 'axios';
import dtable from "../components/dataTable.vue"
export default {
components: {
dtable,
},
data: () => ({
vendors: [],
vendor_names: [],
}),
methods: {
loadVendors() {
axios.get("http://127.0.0.1:8000/vendors.json")
.then(response => (this.vendors = response.data))
},
get_vendor_names() {
this.vendor_names = this.vendors.map(vname => { return vname.name })
console.log("vendor names", this.vendor_names)
},
},
mounted() {
this.loadVendors()
this.get_vendor_names()
}
}
</script>
child component:
<template>
<div class="card">
<DataTable :value="tableData" editMode="row" dataKey="id" v-model:editingRows="editingRows"
<Column field="sku" header="SKU" style="width:10%" :sortable="true">
<template #editor="{ data, field }">
<InputText v-model="data[field]" autofocus />
</template>
</Column>
<Column field="name" header="Name" style="width:30%" :sortable="true">
<template #editor="{ data, field }">
<InputText v-model="data[field]" />
</template>
</Column>
<Column field="description" header="Description" style="width:30%">
<template #editor="{ data, field }">
<InputText v-model="data[field]" />
</template>
</Column
<Column field="brand" header="Vendors" style="width:20%" :sortable="true">
<template #editor="{ data, field }">
<Dropdown v-model="data[field]" :options="vendors" optionValue="value" placeholder="Select a Brand">
</Dropdown>
</template>
</Column>
<Column field="price" header="Price" style="width:20%" :sortable="true">
<template #editor="{ data, field }">
<InputText v-model="data[field]" />
</template>
</Column>
<Column :rowEditor="true" style="width:10%; min-width:8rem" bodyStyle="text-align:center"></Column>
</DataTable>
</div>
</template>
<script>
import axios from 'axios';
export default {
props: [
'tableData',
'vendors'
],
data() {
return {
selectedProducts: null,
editingRows: [],
}
}
}
</script>
my JSON is:
[
{
"id": 1,
"name": "name1",
"description": "test"
},
{
"id": 2,
"name": "name2",
"description": "test"
},
{
"id": 3,
"name": "name3",
"description": "test"
}
]
any help is greatly appreciated

Answer 1

thank you to #Gabe
making it a computed property worked like a charm
You are not waiting for the loadVendors call, so when you call
get_vendor_names() the vendors array is probably still empty. I
suggest you make vendor_names a computed property, so it updates when
vendors changes.