Vue CLI3 - jQuery and Select2 - Compiling Error

Question

I have just started with Vue.js and created a project with Vue CLI3. The objective is to eventually migrate my current app to Vue. I am experimenting with jQuery and Select2 because this was used in my current app and I would like to know if this approach is correct and why I am still receiving compiling errors even though it seems to work. Note: I did install the jQuery dependency via the Vue UI.

Here is what I have:

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 - View

<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 - Component

<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>

Added to .eslintrc.js

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

Questions:

Is this approach correct?
Why do I receive a compiling error?:

Module Warning (from ./node_modules/eslint-loader/index.js): error: '$' is not defined (no-undef) at src/main.js:19:1: 17 | }).$mount("#app"); 18 | 19 | $("#select2-test").select2(); | ^ 20 |

Please help! Thank you guys so much!!!

UPDATE:

I moved the $("#select2-test").select2(); to the component and initiate it when mounted. After cleaning up my VSCode setup and restarting, I am not getting any errors anymore. Still, I would like to get an opinion if this is the right approach.:

<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>

@RoyJ I think it does now. I did have to fix my VSCode setup a little bit and restarted the app. I am not getting any errors now. I was also able to move $("#select2-test").select2(); from the main.js to the select2_test.vue component. Updated the original post — Meisold

Steven Spungin Steven Spungin · Accepted Answer · 2019-02-13T23:32:16

In general, use a ref to get your element instead of relying on jQuery or getElementById.

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

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

You might also want to bind the select's value to a data member.

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

And then add theValue to your data option. Then you can just get and set the select's value using this.theValue. You can also watch it and react to changes.

Finally, any other Vue computed properties or directives that depend on theValue will recalculate as needed.

Vue CLI3 - jQuery and Select2 - Compiling Error

1 Answers