Styling not being applied to SINGLE ELEMENT after exacting JQuery function on single element within a ,vue page

问题

I'm using JQuery-AsRange (https://github.com/thecreation/jquery-asRange) within my vue.js project. The function execute within the .vue page within the script section of my vue page and the JQuery-AsRange library works perfect but, lack any css styling.

The css style that is loaded should handle those id and tags that are generated (I can copy can paste the generated non-style JavaScript code and add hardcore it into the template and it will be styled correctly- it just won't move), but when the JQuery function is executed within the script section - it oddly ignore the page styling.

I haven't been able to find a way to refresh page style after the JQuery executed, but the REST OF THE PAGE STILL CONTAINS ALL ITS STYLING - it is only the "AsRange" section not styled...

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

IMAGES:

EXPECTED RESULT

ACTUAL RESULT

Note- EXPECTED RESULT is using the same base as ACTUAL RESULT the exact same library and CSS. The expected is using straight HTML and JQuery. I want it working for a vue.js element.

回答1:

You can put the asrange method of initializing into mounted

...
...

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

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

来源：https://stackoverflow.com/questions/58637528/styling-not-being-applied-to-single-element-after-exacting-jquery-function-on-si

标签

javascript

jquery

Vue.js

vue-component

vuex