如何在Select2中使用Nuxt3

Question

问题很简单，如何在select2中使用nuxt3？

select2来自https://select2.org/

nuxt3来自v3.nuxtjs.org

Answer 1

我花了几天时间来做这件事，但失败了。最后，我制定了自己的npm一揽子计划。认为可能对其他人有用，因此下面是如何做到这一点：

1 npm安装

npm install nuxt3-select2 --save

2创建一个插件 // plugins/select2.client.ts

import Select2 from 'nuxt3-select2';

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component("Select2", Select2, {});
});

3在模板中使用它

<template>
  <div>
    <Select2 v-model="myValue" :options="myOptions" :settings="{ settingOption: value, settingOption: value }" @change="myChangeEvent($event)" @select="mySelectEvent($event)" />
    <h4>Value: {{ myValue }}</h4>
  </div>
</template>
<script setup lang="ts">
  const myChangeEvent = (event) => {
    console.log("myChangeEvent: ", event);
  }
  const mySelectEvent = (e) => {
    console.log("mySelectEvent: ", event);
  }
  const myOptions = [
    {id: 1, text: 'apple'},
    {id: 2, text: 'berry'},
    {id: 3, text: 'cherry'},
  ]
  const myValue = ref();
</script>

您可以在这里阅读更多文档：nuxt3 3-select2 2