Vue CLI3 - jQuery 和 Select2 - 编译错误

Question

我刚开始使用 Vue.js，并使用 Vue CLI3 创建了一个项目。目标是最终将我当前的应用程序迁移到 Vue。 我正在尝试使用 jQuery 和 Select2，因为这是在我当前的应用程序中使用的，我想知道这种方法是否正确，以及为什么即使它似乎有效，我仍然会收到编译错误。 注意：我确实通过 Vue UI 安装了 jQuery 依赖项。

这是我所拥有的：

main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

/* Custom */
import "./js/jquery.js";
import "./js/select2.js";
import "./css/select2.css";

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

$("#select2-test").select2();

Home.vue - 查看

<template>
  <select2_test></select2_test>
</template>

<script>
// @ is an alias to /src
import select2_test from "@/components/select2_test.vue";

export default {
  name: "home",
  components: {
    select2_test
  }
};
</script>

select2_test.vue - 组件

<template>
  <div>
    <select id="select2-test" class="form-control" style="width: 50%">
      <option value="AK">Alaska</option>
      <option value="HI">Hawaii</option>
    </select>
  </div>
</template>

<script>
export default {
  name: "select2_test"
};
</script>

添加到 .eslintrc.js

"globals": {
"jQuery": true,
"$": true,
"global": true,
"window": true,
"document": true,
"process": true,
"module": true,
"console": true,
"sessionStorage": true,
"localStorage": true
}

问题：

1. 这种方法正确吗？

2. 为什么会收到编译错误？：

   模块警告（来自 ./node_modules/eslint-loader/index.js）： 错误：在 src/main.js:19:1 处未定义“$”（no-undef）： 17 | }).$mount("#app"); 18 | 19 | $("#select2-test").select2(); | ^ 20 |

请帮忙！非常感谢你们！！！

更新：

我移动了 $("#select2-test").select2();到组件并在安装时启动它。清理我的 VSCode 设置并重新启动后，我不再收到任何错误。不过，如果这是正确的方法，我想得到一个意见。：

<template>
  <div>
    <select id="select2-test" class="form-control" style="width: 50%">
      <option value="AK">Alaska</option>
      <option value="HI">Hawaii</option>
    </select>
  </div>
</template>

<script>
export default {
  name: "select2_test",
  mounted() {
    $("#select2-test").select2();
  }
};
</script>

Answer 1

一般来说，使用ref 来获取您的元素，而不是依赖 jQuery 或 getElementById。

  <select ref="theSelect" class="form-control" style="width: 50%">

mounted() {
    $(this.$refs.theSelect).select2();
  }

您可能还希望将选择的值绑定到数据成员。

  <select v-model='theValue' ref="theSelect" class="form-control" style="width: 50%">

然后将theValue 添加到您的数据选项中。然后您可以使用this.theValue 获取和设置选择的值。你也可以watch它并对变化做出反应。

最后，任何其他依赖于theValue 的Vue 计算属性或指令将根据需要重新计算。