如何在 Nuxt3 中使用 Select2答案

【问题标题】：How to use Select2 in Nuxt3如何在 Nuxt3 中使用 Select2
【发布时间】：2022-11-09 23:53:13
【问题描述】：

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

从https://select2.org/中选择2

来自v3.nuxtjs.org的nuxt3

【问题讨论】：

标签： vuejs3 jquery-select2 nuxtjs3

【解决方案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-select2

【讨论】：