Vue3中vue-multiselect-listbox组件渲染异常及报错求助

问题详情 #

尝试使用vue-multiselect-listbox组件，按教程编写代码后页面仅渲染标题内容：

Example
List Options

控制台抛出错误：

Uncaught TypeError: t._self is undefined
    w MultiSelect.vue:1
    renderComponentRoot runtime-core.esm-bundler.js:830
    componentUpdateFn runtime-core.esm-bundler.js:5785
    run reactivity.esm-bundler.js:178
    update runtime-core.esm-bundler.js:5898
    setupRenderEffect runtime-core.esm-bundler.js:5906
    mountComponent runtime-core.esm-bundler.js:5696
    processComponent runtime-core.esm-bundler.js:5649
    patch runtime-core.esm-bundler.js:5124
    mountChildren runtime-core.esm-bundler.js:5368
    processFragment runtime-core.esm-bundler.js:5583
    patch runtime-core.esm-bundler.js:5098
    componentUpdateFn runtime-core.esm-bundler.js:5792
    run reactivity.esm-bundler.js:178
    update runtime-core.esm-bundler.js:5898
    setupRenderEffect runtime-core.esm-bundler.js:5906
    mountComponent runtime-core.esm-bundler.js:5696
    processComponent runtime-core.esm-bundler.js:5649
    patch runtime-core.esm-bundler.js:5124
    render runtime-core.esm-bundler.js:6416
    mount runtime-core.esm-bundler.js:3851
    mount runtime-dom.esm-bundler.js:1453
    <anonymous> main.js:4
    js app.js:39
    __webpack_require__ app.js:103
    __webpack_exports__ app.js:1225
    O app.js:149
    <anonymous> app.js:1226
    <anonymous> app.js:1228
MultiSelect.vue:1

使用的核心代码如下：

App.vue #

<template>
    <h2>Example</h2>

    <h3>List Options</h3>
    <v-multiselect-listbox :options="['Alabama', 'California']"></v-multiselect-listbox>

    <!-- 其他组件示例省略 -->
</template>

<script>
import vMultiselectListbox from 'vue-multiselect-listbox'
import 'vue-multiselect-listbox/dist/vue-multi-select-listbox.css';

export default {
  name: 'Paste-test',
  components: { 'v-multiselect-listbox': vMultiselectListbox },
  data () {
    return {
      selected: '',
      options: ['10001', '10002', '10003', '10004', '10005', '10006', '10007', '10008', '10009', '10010'],
    }
  },
  // 方法省略
}
</script>

main.js #

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

问题原因 #

该组件基于Vue2开发，内部代码依赖Vue2的实例属性_self，而Vue3已移除该属性，导致组件在Vue3环境下无法正常渲染，抛出类型错误。

解决方案 #

方案1：更换Vue3兼容的多选组件 #

推荐使用官方支持Vue3的vue3-multiselect组件：

1. 安装组件：

npm install vue3-multiselect

2. 示例代码：

<template>
  <h2>Example</h2>
  <h3>Basic MultiSelect</h3>
  <multiselect
    v-model="selected"
    :options="['Alabama', 'California']"
    placeholder="Select states"
    multiple
  ></multiselect>
</template>

<script setup>
import Multiselect from 'vue3-multiselect';
import 'vue3-multiselect/dist/vue3-multiselect.css';

import { ref } from 'vue';
const selected = ref([]);
</script>

方案2：降级到Vue2 #

若必须使用原组件，可将项目降级为Vue2：

1. 卸载Vue3依赖：

npm uninstall vue @vue/compiler-sfc

2. 安装Vue2：

npm install vue@2.6.14

3. 修改main.js：

import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: h => h(App)
}).$mount('#app')

额外优化 #

原代码中selected初始值为字符串，多选组件需数组类型，修改为：

data () {
  return {
    selected: [],
    options: ['10001', '10002', '10003', '10004', '10005', '10006', '10007', '10008', '10009', '10010'],
  }
}

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