Vue 3组件Prop传递问题：供应商名称数组无法传入下拉菜单

1. 异步请求时序错误 #

loadVendors是异步操作，axios.get不会立刻返回数据，你在mounted里先调用loadVendors，紧接着调用get_vendor_names时，this.vendors还是初始的空数组，导致vendor_names无法正确生成。

修复方法：把get_vendor_names放到loadVendors的then回调里，确保数据加载完成后再处理：

loadVendors() {
  axios.get("http://127.0.0.1:8000/vendors.json")
    .then(response => {
      this.vendors = response.data
      this.get_vendor_names() // 数据加载完成后再提取名称
    })
},

2. Dropdown组件的选项格式不匹配 #

子组件里的Dropdown配置了optionValue="value"，但父组件传递的vendor_names是纯字符串数组（比如["name1", "name2"]），而PrimeVue的Dropdown组件默认需要包含label和value字段的对象数组（或者通过optionLabel指定显示字段）。

修复方法：

• 方法一：修改get_vendor_names生成符合格式的对象数组：

get_vendor_names() {
  this.vendor_names = this.vendors.map(vendor => ({
    label: vendor.name,
    value: vendor.name // 也可以用vendor.id作为value
  }))
},

• 方法二：如果想直接用字符串数组，修改子组件的Dropdown属性，指定optionLabel为自身：

<Dropdown v-model="data[field]" :options="vendors" optionLabel="." placeholder="Select a Brand"></Dropdown>

3. 子组件模板语法错误 #

• 第三个Column标签未正确闭合：</Column 需要改成 </Column>
• DataTable标签未闭合：开头的<DataTable ...>没有对应的</DataTable>

修改后的完整代码 #

父组件

<template>
  <div>
    <h1 class="title">Catalog</h1>
    <dtable :tableData="products" :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: [],
    products: [] // 补充初始化products，避免传递undefined给子组件
  }),

  methods: {
    loadVendors() {
      axios.get("http://127.0.0.1:8000/vendors.json")
        .then(response => {
          this.vendors = response.data
          this.get_vendor_names()
        })
    },
    get_vendor_names() {
      this.vendor_names = this.vendors.map(vendor => ({
        label: vendor.name,
        value: vendor.name
      }))
      console.log("vendor names", this.vendor_names)
    },
  },

  mounted() {
    this.loadVendors()
  }
}
</script>

子组件

<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" optionLabel="label" 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>
export default {
  props: [
    'tableData',
    'vendors'
  ],
  data() {
    return {
      selectedProducts: null,
      editingRows: [],
    }
  }
}
</script>

内容的提问来源于stack exchange，提问作者spaceCabbage