Solvedvue slider component Load first component fails

Hi,

I'm trying to use this component but when I first load the slider, the first line doesn't use the width properly. The slider is only "fixed", for instance if I resize my window or if open an inspect. This only happens in 1 first slider, as I have a function to add new line, each line contains a slider, besides the first one, the rest is automatically fine.

JS:

components: {
        'vueSlider': window['vue-slider-component']
    },

HTML:

<td class="text-center">
     <vue-slider ref="slider" v-model="rule.value" :options="options"></vue-slider>
</td>

An example of what I'm talking about:

screenshot from 2018-01-24 18-05-24

Is this a bug? The HTML/JS framework that I'm using is Foundation 6

Thanks,

17 Answers

✔️Accepted Answer

@NightCatSama I am calling the vue-slider inside bootstrap collapse where it does not work but it works outside the collapse block. But, calling refresh inside updated() hook solved it. Thanks.

      updated() {
        this.$nextTick(function () {
          this.$refs.slider.refresh()
        })
      }

Other Answers:

@tiagoarasilva Maybe you can try adding this code after loading the data.

  this.data = res.data // simulate loads the data
  this.$nextTick(() => {
    this.$refs.slider.refresh() // refresh the component
  })

Related Issues:

13
vue slider component Vue initialized twice
Specific to a Rails app: Hmmm...I think I just got rid of my duplicate loading error.. ...
5
vue slider component Load first component fails
@NightCatSama I am calling the vue-slider inside bootstrap collapse where it does not work but it wo...
191
swiper Gallery not working when container div is hidden (display:none)
It is far easier than this Just add: To the swiper initialization. I want the swiper gallery to show...
47
swiper [swiper/react] Custom navigation/pagination components using React refs not working/possible?
I was having a hard time getting some of the above examples to work I ended up using the slidePrev()...
30
vue awesome swiper fail to import swiper
For those scratching their head at this error It's because it's not enough to just install vue-aweso...
28
swiper Webpack Production Bundling fails because of UglifyJS Error with Dom7
Well there is probably kind of option to look only in node_modules/swiper The reason why i keep it i...
10
vue awesome swiper [Intervention] Ignored attempt to cancel a touchmove event with cancelable=false, for example because scrolling is in progress and cannot be interrupted.
给html元素添加一个css3属性 即可解决这个问题 [Intervention] Ignored attempt to cancel a touchmove event with cancelabl...
3
swiper Uncaught TypeError: Controller.LinearSpline is not a constructor
As a workaround you can use UMD build (works with webpack) import Swiper from 'swiper/dist/js/swiper...
3
swiper Swiper React feedback needed 🧪
@caseymhunt you also need to include Swiper styles e.g.: Hey guys! I am currently working on next ma...
429
vue router how to change document.title in vue-router?
Hi thanks for filling this issue You can simply define title in route's meta I really want set title...
273
vue router Unknown custom element: <router-view>
You didn't call Vue.use(VueRouter) http://router.vuejs.org/en/installation.html ...
252
vue loader Load a global settings.scss file in every vue component?
I'd ask to leave this open as the real issue is being able to use scss variables mixins in component...
246
sheetjs How to simply export a Worksheet to xlsx?
There are two issues: each object is mapped to a row so if you want a row with name John and city Se...
221
vue router Failed to mount component: template or render function not defined.
add .default to require('xxx.vue') or import('xxx.vue') it will work right maybe it's caused by modu...
205
vue loader html image src require not respecting webpack aliases?
vue-html-loader and css-loader translates non-root URLs to relative paths In order to treat it like ...
189
vue loader Error after updating webpack from 5.47.1 to 5.48.0 (Cannot find module 'webpack/lib/rules/DescriptionDataMatcherRulePlugin')
I am a Laravel user npm i vue-loader updated Vue-loader from 15.9.6 to 15.9.8 fixed this for me usin...
186
vuetify [Bug Report] Could not find a declaration file for module 'vuetify/lib'
@KaelWD Thank you for the link More specifically this comment helped me out to properly update my ts...
179
vue i18n Uncaught TypeError: Cannot read property 'config' of undefined
Hi @gmarineau you have to do .use before create i18n instance: Hi I have just copy the basic example...
175
storybook Webpack 4 support?
I'm getting the below error when running Storybook with a project using Webpack 4; This is preventin...
174
bootstrap vue Dynamic property for v-b-toggle
v-b-toggle does accept a dynamic value to specify a single target ID Not do not include the # as it ...
170
vue router No stacktrace on NavigationDuplicated error uncaught in promise
I understand it may be a bit confusing to see the UncaughRejection error in the console ...
169
vue loader Module build failed: TypeError: this._init is not a function
I had a similar situation - looks like webpack is using vue itself for loader instead of vue-loader ...
167
prettier Change HTML/JSX formatting to have one attribute/prop per line
The point I am trying to make is that the vertical space matters Wasting it (too much) has negative ...
166
vue loader Vue packages version mismatch error
Fixed for me: npm install vue-template-compiler --save-dev In our project ...
164
vue i18n How can i use vue-i18n in '.js' file, I have use it in Vue template and it works.
I found a 'elegant' solution first you need a file lang.js like this then you need to import it insi...
137
electron vue this.$store.dispatch('someAsyncTask'), action not run
Same here and I've wasted just 2h debugging this crap until I realized the issue is in fact in elect...
120
vue Await async component lifecycle hooks
This is the actual code that I want to be awaited: Which would be part of the UserPage component. ...
119
ionic framework Bugs when run ionic cordova run ios --device or use --target options
Hi @fwagner thank you for the good news I already build and upload to production So the problem here...
117
vue Cannot import from a typescript Vue component into another typescript Vue component
This is because you don't have declarations of .vue files then the typescript compiler cannot load t...
111
bootstrap vue How to hide OK or Cancel buttons on Modal?
Add property in b-modal component hide-footer=true Hi In the docs it says: You can customize the siz...
111
storybook babelHelpers is not defined using Rollup [Solved]
@alejandronanez you can remove external-helpers from your .babelrc file and enable it back only on y...
110
vue i18n Access to vue-i18n assets is not available within a Vue component method when called via a Promise
I having the same issue use this.$root.$t() in promise works for me vue & vue-i18n version vue v2.3....
109
sweetalert2 Text input not clickable when bootstrap modal is open
Excellent thanks for your answer Looking for the event listener I found a solution in bootstrap: htt...
105
prettier [resolved] [HTML] allow corresponding option to jsxBracketSameLine
I don't think I've ever seen any markup language with the closing brackets on a separate line I'd li...
102
vetur Veture 0.19.0 throwing multiple error messages.
my workaround was to disable this option: vetur.experimental.templateInterpolationService: false so ...
98
vuetify [Bug Report] Word Wrapping in Card Title breaks words before wrapping the line.
Yes think it is a bug as well I can't imagine that word-break: break-all; is intendet ...
96
eslint plugin vue script-indent make me crazy!!!!!!!
If you are using webstorm you can File => Setting => Editor => Code Style => HTML add Do not indent ...
95
vue v-html does not work with filters
You can use $options.filters : Vue.js version 2.1.3 Reproduction Link https://jsfiddle.net/peterkorg...
94
nuxt.js Babel "loose" option error spamming in console on fresh project
With yarn please pin your babel deps manually in your package.json then use yarn install again: With...
90
prettier Feature Request: breakBeforeElse
This feels like one of those I can't adopt prettier unless options that was mentioned in the 1.0 rel...
90
vetur Emmet tab autocomplete not working in vue files
it works for me when i add vue: html to but this adds it to the whole file also in script and other ...
88
eslint plugin vue vue/script-indent 配置问题
@wengpengfeijava 改一下webstorm规则就好了, File => Setting => Editor => Code Style => HTML 找到 add Do not ind...
88
vuepress Fix babel useBuiltIns core-js warning
Adding corejs: 3.0.0 in the .babelrc file turned off the warnings. I confirm that this is an issue r...
87
prettier Add option to omit semicolons in output
I use standard.js which is a popular no-configuration style guide & linter They insist on a semicolo...
85
vuetify Datatable - Default sorting (or no sort at all) / manual sorting
In case it helps anyone else looking for default sorting in a data table: Create a data-table ...
83
vue loader Getting warnings for export 'default' (imported as 'mod') was not found
I have the same problem I looked it up There was an esModule in mini-css-extract-plugin v1.0.0 I sol...
82
vue loader How to use "scss" in *.vue?
vue-loader infers the loader to use from the lang attribute's value but there is no scss-loader ...
80
element [Bug Report] $attrs is readonly $listeners is readonly
I use electron-vue and meet this issue too there is a solution works for me in webpack.render.config...
80
nuxt.js Getting sass error when including bulme. Using adonuxt.
@alanaasmaa @motia I found the solution This works for me nuxt.config.js ref https://nuxtjs.org/api/...