Vue3 组件中不可用的 Props

Question

我在 Twig 模板中有这个：

<div
    class="multiSelect"
    id="{{ id }}"
    data-options="{{ options|json_encode }}"
    data-field="{{ handle }}"
>
    <div class="selectComponent"></div>
</div>

以及执行安装的js文件：

multiSelects.forEach((el) => {
   const component = el.querySelector('.selectComponent');
   const options = el.dataset.options || '[]';
   const field = el.dataset.field || '';
   console.log('Field before mounting:', field);
   console.log('Items before mounting:', options);
   const multiSelect = createApp(MultiSelect);
   multiSelect.use(vuetify).mount(component, {
       props: {
           items: options,
           field: field,
       }
    });
});

将正确的值输出到控制台。

在页面上，组件确实呈现，但它显示“没有可用数据”。在控制台中它输出一个空字符串或数组。

这是组件的代码。

<template>
  <v-select
    v-model="selectedvalue"
    :items="items"
    :name="field"
    item-text="title"
    item-value="id"
    label=""
    chips
    multiple
  ></v-select>
</template>

<script>
  export default {
    props: {
      items: {
        type: Array,
        default: () => []
      },
      field: {
        type: String,
        default: ''
      }
    },
    data() {
      console.log('After mounting items:', this.items);
      console.log('After mounting field:', this.field);
      return {
        selectedvalue: [],
      }
    }
  }
</script>

所以看来组件中的道具没有被正确拾取。这是为什么？

Answer 1

根组件 props 应该是

createApp()

的第二个参数，而不是

mount()

。 请参阅文档以供参考。您传入的对象也不正确。移除

props

键。它应该只是 prop 键值对。

const multiSelect = createApp(MultiSelect, {
  items: options,
  field: field,
});
multiSelect.use(vuetify).mount(component);