Vue3组件Props未正常传递问题排查求助

核心问题1：JSON字符串未转为数组类型 #

el.dataset.options获取到的是JSON格式的字符串（HTML5 dataset会把所有数据统一转为字符串类型），但你的组件items props要求的是Array类型。Vue会因为类型不匹配，自动使用props的默认值（空数组），导致组件显示“No data available”。

核心问题2：Vue 3根组件props传递方式错误 #

你当前通过mount方法的第二个参数传递props的写法不符合Vue 3的规范，根组件的props应该作为createApp的第二个参数传入，才能被正确接收。

修正后的JS代码 #

multiSelects.forEach((el) => {
   const component = el.querySelector('.selectComponent');
   const optionsStr = el.dataset.options || '[]';
   // 将JSON字符串解析为数组
   const options = JSON.parse(optionsStr);
   const field = el.dataset.field || '';
   console.log('Field before mounting:', field);
   console.log('Items before mounting:', options);
   // 根组件props直接传入createApp的第二个参数
   const multiSelect = createApp(MultiSelect, {
       items: options,
       field: field,
   });
   multiSelect.use(vuetify).mount(component);
});

说明 #

1. 解析JSON字符串：用JSON.parse()把从dataset拿到的字符串转为数组，匹配组件items的类型要求；
2. 正确传递props：Vue 3中创建根组件实例时，props需要作为createApp的第二个参数传入，这样组件才能正确接收并使用这些props值。

修正后，组件内的this.items和this.field就能拿到正确的值，v-select也会正常渲染数据。

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