Стилизация не применяется к SINGLE ELEMENT после выполнения функции JQuery для одного элемента на странице vue - PullRequest
Новая
       12

Стилизация не применяется к SINGLE ELEMENT после выполнения функции JQuery для одного элемента на странице vue

0 голосов
/ 31 октября 2019

Я использую JQuery-AsRange (https://github.com/thecreation/jquery-asRange) в моем проекте vue.js. Функция выполняется на странице .vue в разделе сценариев моей страницы vue, и библиотека JQuery-AsRange работает отлично, но,Отсутствует какой-либо стиль CSS.

Загруженный стиль CSS должен обрабатывать те идентификаторы и сгенерированные теги (я могу скопировать, могу вставить сгенерированный нестандартный код JavaScript и добавить его в шаблон, и он будетстилизован правильно - он просто не двигается), но когда функция JQuery выполняется в разделе скрипта - он странным образом игнорирует стилизацию страницы.

Я не смог найти способ обновить стиль страницыпосле выполнения JQuery, но ОСТАЛОСЬ СТРАНИЦА ВСЕ ЕГО СОДЕРЖИТСЯ - это только раздел «AsRange» без стиля ... 

<template>
...
...

<div class="padding">
  <h5>Range Bar:</h5>
  <input class="range-example" type="text" min="0" max="10" value="4,10" step="1" /> <!-- JS is under /js/script.jss (Copied the styling from the library 'JQuery-AsRange' as part of my .css library 
</div><!-- close div -->

</template>


<script>
import $ from 'jquery';
import 'jquery-asRange';

$(document).ready(function() {
   $(".range-example").asRange({
  range: true,
  limit: false,
  tip: true,
   });
 });
</script>

ИЗОБРАЖЕНИЯ:

ОЖИДАЕМЫЙ РЕЗУЛЬТАТ

АКТУАЛЬНЫЙ РЕЗУЛЬТАТ

Примечание- ОЖИДАЕМЫЙ РЕЗУЛЬТАТ использует ту же базу, что и АКТУАЛЬНЫЙ РЕЗУЛЬТАТ ЭКСct та же библиотека и CSS. Ожидается использование прямого HTML и JQuery. Я хочу, чтобы он работал для элемента vue.js.

1 Ответ

0 голосов
/ 01 ноября 2019

Вы можете поместить asrange метод инициализации в mounted

...
...

<script>
import $ from 'jquery';
import 'jquery-asRange';

export default {
  mounted(){
    $(".range-example").asRange({
      range: true,
      limit: false,
      tip: true,
    });
  }
}
</script>
...