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
}

问题：

这种方法正确吗？
为什么会收到编译错误？：

模块警告（来自./node_modules/eslint-loader/index.js）：错误：在src / main.js：19：1上未定义“ $”（无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对它做出反应。

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

Vue CLI3-jQuery和Select2-编译错误

1 个答案: