Vue CLI3 - jQuery и Select2 - ошибка компиляции - PullRequest
Новая
       7

Vue CLI3 - jQuery и Select2 - ошибка компиляции

0 голосов
/ 13 февраля 2019

Я только начал с Vue.js и создал проект с Vue CLI3.Цель состоит в том, чтобы в конечном итоге перенести мое текущее приложение в Vue.Я экспериментирую с jQuery и Select2, потому что это использовалось в моем текущем приложении, и я хотел бы знать, правильный ли этот подход и почему я все еще получаю ошибки компиляции, даже если кажется, что это работает.Примечание. Я установил зависимость jQuery через пользовательский интерфейс Vue.

Вот что у меня есть:

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): ошибка: '$' не определено (no-undef) вsrc / main.js: 19: 1: 17 |}) $ Монтирования ( "# приложение").18 |19 |$ ( "# Выбор2-тест") Выбор2 ().|^ 20 |

Пожалуйста, помогите!Большое спасибо, ребята !!!

ОБНОВЛЕНИЕ:

Я переместил $ ("# select2-test"). Select2 ();к компоненту и инициировать его при установке.После очистки установки и перезапуска VSCode я больше не получаю никаких ошибок.Тем не менее, я хотел бы получить мнение, если это правильный подход.: 1010 

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

1 Ответ

0 голосов
/ 14 февраля 2019

Как правило, используйте 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, будут пересчитываться по мере необходимости.

...