Vue CLI3 - jQuery 和 Select2 - 编译错误

Posted 2023-02-22

【中文标题】Vue CLI3 - jQuery 和 Select2 - 编译错误

【英文标题】：Vue CLI3 - jQuery and Select2 - Compiling Error

【发布时间】：2019-07-07 18:51:58

【问题描述】：

我刚开始使用 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

问题：

这种方法正确吗？

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

模块警告（来自 ./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>

【问题讨论】：

jquery.js 一定会创建$ 别名吗？

@RoyJ 我认为现在可以。我确实必须稍微修复我的 VSCode 设置并重新启动应用程序。我现在没有收到任何错误。我还能够移动 $("#select2-test").select2();从 main.js 到 select2_test.vue 组件。更新了原帖

【参考方案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 计算属性或指令将根据需要重新计算。

【讨论】：

谢谢史蒂文。我使用“ref”尝试了您的方法，但看起来 select2 现在没有加载到下拉列表中。但是，编译时不要出现任何错误。浏览器调试器显示：this.$refs.select2test.select2 is not a function.你能帮我理解我缺少什么吗？我需要依赖吗？我肯定会使用“v-model”值。谢谢！

你有更新吗？我尝试了多种使用 ref 的方法，但似乎都没有。非常感谢！

@Meisold 在挂载中，添加：console.log(this.$refs.theSelect) 并以输出响应。是你的 html 元素吗？