文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在简单的HTML页面中使用vue-select？

问如何在简单的HTML页面中使用vue-select？
EN

Stack Overflow用户

提问于 2022-06-06 07:41:29

回答 1查看 323关注 0票数 0

这是我第一次用Vue + vue-select“尝试”。

我已经导入了Vue和vue-select，就像在vue-select 文档中解释的那样。

我的第一次尝试是这个简单的HTML页面：

    <!DOCTYPE html>
<html lang="en">
  <head>
    <!-- include VueJS first -->
    <script src="https://unpkg.com/vue@latest"></script>

    <!-- use the latest vue-select release -->
    <script src="https://unpkg.com/vue-select@latest"></script>
    <link
      rel="stylesheet"
      href="https://unpkg.com/vue-select@latest/dist/vue-select.css"
    />
  </head>
  <body>
    <div id="app">
      <h1>Vue Select</h1>
      <v-select :options="options"></v-select>
    </div>

    <script>
      Vue.component("v-select", VueSelect.VueSelect);

      new Vue({
        el: "#app",
        data: {
          options: ["foo", "bar", "baz"],
        },
      });
    </script>
  </body>
</html>

当我尝试此页面时，控制台中有以下错误：

第一次尝试有什么不对？当我理解第一个例子的时候，剩下的就会更容易了。

vue.js

vue-select

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-06-06 08:01:17

我刚刚检查了您的代码，似乎这个问题是由于您正在使用的vue版本造成的。我刚刚使用了2.*版本，它正在工作。

演示

Vue.component("v-select", VueSelect.VueSelect);
new Vue({
  el: "#app",
  data: {
    selected: 'foo',
    options: ["foo", "bar", "baz"]
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-select/3.10.3/vue-select.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-select/dist/vue-select.css"/>
<div id="app">
  <h1>Vue Select</h1>
  <v-select :options="options" v-model="selected"></v-select>
</div>

更新这里是v-select的Vue 3版本

const { createApp } = Vue
const { createVuetify } = Vuetify

const vuetify = createVuetify()

const app = createApp({
  template: '#app-template',
  data: () => ({
    items: ['Foo', 'Bar', 'Fizz', 'Buzz'],
  }),
}).use(vuetify).mount('#app')

<script src="https://unpkg.com/vue@next/dist/vue.global.js"></script>
<script src="https://unpkg.com/@vuetify/nightly@3.0.0-next-20220604.0/dist/vuetify.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@vuetify/nightly@3.0.0-next-20220604.0/dist/vuetify.css"/>
<link rel="stylesheet" href="https://unpkg.com/@mdi/font@6.x/css/materialdesignicons.min.css"/>
<script type="text/x-template" id="app-template">
  <v-app>
    <v-container fluid>
          <v-select
            :items="items"
          ></v-select>
    </v-container>
  </v-app>
</script>

<div id="app"></div>

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/72514497

复制

相似问题

问如何在简单的HTML页面中使用vue-select？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在简单的HTML页面中使用vue-select？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在简单的HTML页面中使用vue-select？
EN