link274 link275 link276 link277 link278 link279 link280 link281 link282 link283 link284 link285 link286 link287 link288 link289 link290 link291 link292 link293 link294 link295 link296 link297 link298 link299 link300 link301 link302 link303 link304 link305 link306 link307 link308 link309 link310 link311 link312 link313 link314 link315 link316 link317 link318 link319 link320 link321 link322 link323 link324 link325 link326 link327 link328 link329 link330 link331 link332 link333 link334 link335 link336 link337 link338 link339 link340 link341 link342 link343 link344 link345 link346 link347 link348 link349 link350 link351 link352 link353 link354 link355 link356 link357 link358 link359 link360 link361 link362 link363 link364 link365 link366 link367 link368 link369 link370 link371 link372 link373 link374 link375 link376 link377 link378 link379 link380 link381 link382 link383 link384 link385 link386 link387 link388 link389 link390 link391 link392 link393 link394 link395 link396 link397 link398 link399 link400 link401 link402 link403 link404 link405 link406 link407 link408 link409 link410

[Vue.js] Input value overridden on mutation with v-debounce

Consider the following example:

https://codesandbox.io/s/vdebounce-input-override-ej4nz

It’s a simplified (and mostly mocked) version of a larger app, using Observables to get filtered results from multiple APIs, based on user inputs. I need the inputs debounced.
In the app the debounce value is larger, so the issue’s less noticeable, but I’ve lowered it in the example to make the issue easier to spot. I also tried to mock the randomness of the server response times.

The issue is that whenever I get a response back, if I’m typing in the input I lose a few characters, depending on how fast I type.
If I remove the v-debounce directive (or the .lazy modifier), the issue is gone, but there’s no debounce.

I’ve also raised it on the v-debounce repo.

I know I could dump v-debounce altogether and use lodash’s debounce inside the watch, but I was hoping I don’t have to do that (since v-debounce is supposed to be catered for Vue, right!?). I’ve tried to keep things as “Vue” as possible so far.

Important edit: (after it was answered) It appears there are two packages defining a v-debounce directive. The good one is here: npm, github.

npm i vue-debounce

The one I used is v-debounce and overrides the input.

Solution :

Understanding the problem

The problem you’re having is the interplay between markup rendering and event debouncing (which may be a problem of v-debounce or an intended behaviour opinions may vary):

You are debouncing a triggering of the change event on the input element

That debounced event triggers with the input’s value at the time of call (that is, it has no memory of call data in the debounced call)

Separately (at each actual call of the debounce) you have an asynchronous operation (mock server search) change the state of the component, and trigger a component re-render

This re-render checks the whole of the component DOM, and “corrects” the input value it sees as wrong

When a debounced change event triggers after an asynchronous operation, it triggers with the current DOM input value, which is by now outdated (or even some mangled mess, if you kept typing)

Possible solutions

The main issue here is that the actual search value should be tracked. You want to debounce the search action, not the value change itself (and certainly not the input change events)

Handle the debouncing ourselves

Here is an alternative to the app, that does the following:

Keeps a v-model - search - no debouncing
On change of said v-model:

If a search is currently underway, immediately cancels it
Triggers a debounced search action (which will only actually start when typing stops)

[…]
mounted() {
this.debouncedSearch = _.debounce(this.search, 500);
},
methods: {
search() {
this.loading = true;
this.$searchTimeout = setTimeout(() => {
store.albums = albums.filter(
album => album.title.indexOf(this.term) > -1
);
store.searchTerm = this.term;
this.loading = false;
}, Math.floor(Math.random() * 1000 + 300));
}
},
watch: {
term() {
if (this.$searchTimeout) {
this.loading = false;
clearTimeout(this.$searchTimeout);
delete this.$searchTimeout;
}
this.debouncedSearch();
}
}

Debounce directive that doesn’t affect v-model

Here is another solution that uses a custom directive that debounces an input event handler, without messing with v-model bindings to change

Here the app:

Keeps a v-model - search - no debouncing

On change of said v-model, If a search is currently underway, immediately cancels it

Triggers a debounced search action (which will only actually start when typing stops) using a v-debounce directive

<input
v-model=”term”
v-debounce=”{ delay: 500, handler: search}”
@input=”clearSearch”>

[Vue.js] Array splice function weirdness within 2 different arrays

there is allProducts prop is passed by Laravel. And it contains 15 elements.

<product-list :all-products=‘@json($products)’></product-list>

And in ProductList component, I try to keep data of allProducts prop by assigning it to another variable, called result, then I can use later.

Next, I use splice function to get a portion data from result, and assign to products. So the products and result should have the same 9 elements (15 - 6 = 9). However, I don’t know why my allProducts also has 9 elements (it should be 15 because I didn’t splice allProduct).

I tried to print out allProduct before using splice and it contains 15 elements as I expected but the console.log statement after using splice function only return 9 elements.

export default {
name: “ProductPage”,
data() {
return {
products: [],
result: []
}
},
props: [‘allProducts’],
created() {
this.result = this.allProducts;

// Print 15 products
console.log(this.allProducts.length);

this.products = this.result.splice(0, 6);

// Only print 9 products, even I didn’t use splice on allProducts array.
console.log(this.allProducts.length);

}

Solution :

Splice mutates original array,

The splice() method changes the contents of an array by removing or
replacing existing elements and/or adding new elements in place.

You can use slice instead

[Vue.js] Vuex state not updating, state.dispatch no being called

when using vue.js and a Vuex store in a project.

Here’s the Vuex store

export default new Vuex.Store({
state: {
inventoryPageNumber: 0,
inventoryPageCount: 0,
},
getters: {
getinventoryPageNumber: state => {
return state.inventoryPageNumber;
},

getinventoryPageCount: state => {
return state.inventoryPageCount;
}
},
mutations: {
setinventoryPageNumber(state, pagenumber) {
state.inventoryPageNumber = pagenumber
},

setinventoryPageCount(state, pagecount) {
state.inventoryPageCount = pagecount
}
},
actions: {
patchinventoryPageNumber(context, pagenumber) {
context.commit(‘setinventoryPageNumber’, pagenumber)
},

patchinventoryPageCount(context, pagecount) {
context.commit(‘setinventoryPageCount’, pagecount)
},

}
})

And this is where it is being used in component:

**Tempalate**
<button class=”fa fa-backward fa-xs text-white button-trans” @click=”firstPage” :disabled=”pageNumber==0” aria-hidden=”true”></button>

<span class=”text-white pl-2 pr-2”>Page {pageNumber+1} of {pageCount}</span>
**Script**

computed:{
pageCount: {
get() {
let count = Math.ceil(this.products.length / this.size);
return count;
},
set(newValue) {
store.dispatch(“patchinventoryPageCount”, newValue);
}
}
},

methods: {
firstPage() {
this.pageNumber = 0;
store.dispatch(“setinventoryPageNumber”, this.pageNumber);
}
}

Expected

PageCount to be updated as calculation being done and Page Number to update on click

Actual

Local computed property gets updated, state doesn’t

store.dispatch is not being called

Solution :

You are dispatching to the wrong action. Change:

store.dispatch(“setinventoryPageNumber”, this.pageNumber);

to

store.dispatch(“patchinventoryPageNumber”, this.pageNumber);

[Vue.js] Javascript Read Object Array

there is jquery code from which I’m fetching the data report based on weekdays.
What is to read an array object returned by ajax. Here is the script :

<script>
export default {
data() {
return {
currentcohortgraphdata: [{“Monday”:”0”,”Tuesday”:”0”,”Wednesday”:”0”,”Thursday”:”0”,”Friday”:”0”,”Saturday”:”0”,”Sunday”:”0”}],
}
},
mounted() {

},
methods: {
loadCohortAttendancies() {
this.$Progress.start();
axios.get(“api/loadCohortAttendancies”).then(({data}) => (this.currentcohortgraphdata = data));
this.$Progress.finish();
var result = this.currentcohortgraphdata;

result.forEach(function (e) {
if (e.Monday > 0) {
alert(e.Thursday);
}
});
}
},
created() {
this.loadCohortAttendancies();
},
mounted() {

}
}

When I run above script from ajax request axios.get(“api/loadCohortAttendancies”).then(({data}) => (this.currentcohortgraphdata = data)); The results returned from the request is [{“Monday”:”12”,”Tuesday”:”10”,”Wednesday”:”3”,”Thursday”:”5”,”Friday”:”4”,”Saturday”:”1”,”Sunday”:”9”}]
. But unfortunately when I run the script I dont get result from the alert(e.Thursday); part of the script, can anyone point where I’m getting wrong? Thanks in advance

Solution :

What is happening is that you are running the code before the request is done, and it results in running the forEach with default values

currentcohortgraphdata:
[{“Monday”:”0”,”Tuesday”:”0”,”Wednesday”:”0”,”Thursday”:”0”,”Friday”:”0”,”Saturday”:”0”,”Sunday”:”0”}],

Simply move ur code inside .then block

axios.get(“api/loadCohortAttendancies”).then(({data}) => {
this.currentcohortgraphdata = data
this.$Progress.finish();
var result = this.currentcohortgraphdata;

result.forEach(function (e) {
if (e.Monday > 0) {
alert(e.Thursday);
}
});
});

Alternatively, you can use async/await syntax:

methods: {
async loadCohortAttendancies() {
this.$Progress.start();
const { data } = await axios.get(“api/loadCohortAttendancies”);
this.currentcohortgraphdata = data;
this.$Progress.finish();
const result = this.currentcohortgraphdata;

result.forEach(function (e) {
if (e.Monday > 0) {
alert(e.Thursday);
}
});
}
},

Solution 2:

Since JavaScript is asynchronous, the result.forEach is running before the axios request is done. You can fix this by simply moving that block of code that relies on currentcohortgraphdata being set, into another .then() block following the one that sets the data. Like so:

loadCohortAttendancies() {
this.$Progress.start()
axios.get(“api/loadCohortAttendancies”)
.then({data} => this.currentcohortgraphdata = data)
.then(() => {
this.$Progress.finish();
var result = this.currentcohortgraphdata

result.forEach(e => {
if (e.Monday > 0) {
alert(e.Thursday)
}
})
})
}

Solution 3:

When you execute forEach, the axios.get request method has not been executed yet.

So, change the code and try it like this

loadCohortAttendancies() {
this.$Progress.start();
axios.get(“api/loadCohortAttendancies”).then(({data}) => {
this.currentcohortgraphdata = data;
this.currentcohortgraphdata.forEach(function (e) {
if (e.Monday > 0) {
alert(e.Thursday);
}
});
this.$Progress.finish();
});
}

[Vue.js] what's the equivalent vue-apollo options of this curl request?

I don’t know how to pass the –user field of this curl request in vue-apollo

curl -v \
--user 'user@domain.com:password’ \
-X POST \
-H “Content-Type: application/json” \
--data ‘{ “query”: “{ companies{ uid name url }” }’ \
http://localhost:4000/graphql

where in vue-apollo can I set –user ?

I’ve tried in vue-apollo options object the following

const defaultOptions = {
// You can use `https` for secure connection (recommended in production)
httpEndpoint,
wsEndpoint: null,
persisting: false,
websocketsOnly: false,
ssr: false,
getAuth: () => `Basic user@domain.com:password`
};

but it doesn’t work

I’m expecting the companies results

{
“data”: {
“companies”: [
{
“id”: “someId”,
“name”: “Facebook”,
“url”: “facebook.com”
},
{
“id”: “someId”,
“name”: “Twitter”,
“url”: “twitter.com”
}
]
}
}

Solution :

The getAuth method in defaultOptions should return the encoded Basic authentication

getAuth: () => `Basic ZrT2mWt3gJKHRJ33tf20hJrq==`

const defaultOptions = {
// You can use `https` for secure connection (recommended in production)
httpEndpoint,
wsEndpoint: null,
persisting: false,
websocketsOnly: false,
ssr: false,
getAuth: () => `Basic ZrT2mWt3gJKHRJ33tf20hJrq==`
};

[Vue.js] How to clear dynamic values passed into vue-js-modal

In my vueJs project, there is a table that displays some products data from the database. When i click on a product tr, it should open a modal that displays a form to enter further details for the product clicked like so:

<table class=”table table-responsive table-bordered”>
<thead>
<tr>
<th>ID</th>
<th>Product Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr v-for=”prod in products” :key=”prod.id”>
<td>{ prod.id }</td>
<td>{ prod.name }</td>
<td><button class=”btn btn-success btn-sm” @click.prevent=”addStocks(prod)”>Add Stock</button></td>
</tr>
</tbody>
</table>

Now in my script, there is a method to open the modal and pass the value of the item clicked to the modal like so;

addStocks(prod){
this.$modal.show(‘add-stocks’)
this.newStock.unitPrice = prod.sellin_price
this.newStock.id = prod.id
this.newStock.name = prod.name
},

and my data object

data() {
return {

newStock: {
id: null,
name: ‘’,
size: ‘’,
srln: ‘’,
colour: ‘’,
mfg: ‘’,
expiry: ‘’,
selling_price: ‘’
},
}
}

and the modal component

<modal name=”add-stocks” height=”auto” :draggable=”true” :width=”600”>
<div class=”modal-header”>
<h4>Add new stock</h4>
</div>
<div class=”modal-body form-horizontal”>
<div class=”form-group”>
<label for=”unitPrice” class=”control-label col-md-2”>Unit Price</label>
<div class=”col-md-4”>
<div class=”input-group”>
<span class=”input-group-addon” id=”basic-addon1”>₦</span>
<input class=”form-control” v-model=”newStock.unitPrice” readonly aria-describedby=”basic-addon1”>
</div>
</div>
<div style=”clear:both”></div>
</div>
<div class=”form-group”>
//form fields here
</div>
<div class=”modal-footer modal_btns”>
<button class=”btn btn-primary” @click.prevent=”uploadStock”>Save</button>
<button class=”btn btn-danger” @click.prevent=”cancelUpload”>Cancel</button>
</div>
</modal>

Now, the issue is when i fill the fields in the modal and click on the cancel button (without saving), i expect the fields to be cleared so when i click on another product tr, i get a fresh form, but this is not the case, the details filled into the previously closed modal form displays. In the cancelUpload methods, there is cleared the fields before closing the modal;

cancelUpload(){
this.$modal.hide(‘add-stocks’)
this.newStock.unitPrice = prod.sellin_price
this.newStock.id = prod.id
this.newStock.name = prod.name
}

When i click on the save button and after api call is made, i call this method to hide the modal but the same issue occurs as the details display when next i open another modal.
How do i fix this?

Solution :

First of all check whether the method is called everytime the modal is being closed i.e either by clicking on cancel button,cross sign or esc key.

Next this could be the issue of vue.js reactivity.
An object property should be updated using set method in vue.js js to keep it reactive.

Hence try as below.

cancelUpload(){
this.$modal.hide(‘clear-stocks’)
this.$set(this.newStock,unitPrice,’’);
this.$set(this.newStock,id,’’);
this.$set(this.newStock,name,’’);
}

You can clear other properties also in the above method.

Or else in the addStocks method also you can set the rest of properties to empty.

More on Vue.set here.

[Vue.js] Vuejs How to display selected <li> element in ul dropdown menu

I’ve created a simple dropdown menu using ul and li elements. I used a for loop to dynamically generate the li elements. there is a class called nav-is-visible that will display the li elements when the user clicks on the dropdown menu. However, I do not know how to display the currently selected value. Here’s my code:

Update: I’ve added a codepen link https://codepen.io/Issaki/pen/OYxbJV

Update: when still trying to solve this issue, can anyone help me?

<template>
<div>
<nav :class=”{‘nav-is-visible’ : displayCategory}”>
<ul>
<li v-for=”item in items” :key=”item.id” @click=”displayCategory = !displayCategory”>
<p>{item.name}</p>
</li>
</ul>
</nav>
</div>
</template>

<script>
export default {
data() {
return {
displayCategory: false,
items: [
{
id: 1,
name: “Basketball”
},
{
id: 2,
name: “Soccerr”
}
]
};
},

methods: {
},
computed: {}
};
</script>

<style>
nav {
width: 100%;
top: 90px;
left: 0;
z-index: 3;
height: 45px;
line-height: 45px;
vertical-align: middle;
display: inline-block;
font-size: 0.1px;
font-weight: 300;
font-style: normal;
cursor: pointer;
padding: 0;
cursor: pointer;
transition: opacity 0.25s ease-in-out;
-moz-transition: opacity 0.25s ease-in-out;
-webkit-transition: opacity 0.25s ease-in-out;
}

/* Create the bordera and the surrounding */
nav ul {
height: 45px;
padding: 0 10px;
text-align: left;
border: 1px solid #33383b;
background: #fafafa;
border-radius: 3px;
}

nav ul li {
display: block;
position: relative;
}

nav ul li:first-child:before {
position: absolute;
content: “ Menu “;
position: relative;
font-size: 1.6rem;
font-size: 16px;
font-weight: 600;
text-transform: uppercase;
}
nav ul li:first-child:after {
position: absolute;
top: 0;
right: 0;
font-size: 12px;
font-size: 1.2rem;
content: “\f0d7”;
color: #2267b9;
padding-right: 10px;
}

/* Hide the li elements */
nav p {
display: none;
font-size: 1.5rem;
font-size: 15px;
text-decoration: none;
text-transform: uppercase;
color: #4a5564;
}

#category-btn {
display: none;
}

.category-input {
display: none;
}

nav.nav-is-visible ul {
height: initial;
background: #f1f1f1;
}

nav.nav-is-visible ul li:first-child:after {
content: “\f00d”;
}
nav.nav-is-visible ul li p {
display: block;
border-bottom: 2px solid #f1f1f1;
}
nav.nav-is-visible ul li p:hover {
border-bottom: 2px solid #4a5564;
}
nav.nav-is-visible ul li:last-child {
margin-bottom: 10px;
}

/* Make button visible again when nav-is-visible class is toggled */
nav.nav-is-visible #category-btn {
display: block;
}
</style>

Solution :

It’s needed to:

save on which item you clicked.
add on the li a conditionnal class based on equality of selectedId and item id.

<template>
<div>
<nav :class=”{‘nav-is-visible’ : displayCategory}”>
<ul>
<li v-for=”item in items” :key=”item.id” @click=”select(item.id)” :class=”selectedId === item.id ? ‘my-selected-item-class’:null”>
<p>{item.name}</p>
</li>
</ul>
</nav>
</div>
</template>

<script>
export default {
data() {
return {
selectedId : null,
displayCategory: false,
items: [{id: 1,name: “Basketball”},{id: 2,name: “Soccerr”}]
};
},
methods: {
select(itemId){
this.selectedId = itemId
this.displayCategory = !this.displayCategory
}
}
};
</script>

[Vue.js] Vuex can't update component after mutation

I’m trying to update a component after i pushed something new into my array. I create a post in createPost.vue.js and commit it into my store.js file where it store the object that i send into the state.

The problem i got is that there is too refresh the page to get the new data in the array.

createPost.vue:

<script>
import store from ‘../store’
import axios from ‘axios’;

export default {
methods:{
postPostToDb(title,content){
const postObj = {
title:title,
content:content,
}
axios.post(‘http://localhost:5000/v1/api/posts', postObj)
.then((postObj)=>{
this.$store.commit(‘ADD_POST’, postObj);
});
},
},
}
</script>

This is where i get all the data from store.js.

<script>
import store from ‘../store’

export default {
computed:{
items:function(){
return store.state.posts;
},
},
async created(){
let data = await fetch(‘http://localhost:5000/v1/api/posts');
data = await data.json();
this.$store.commit(‘INIT_POST’, data);
},
}
</script>

store.js:

import vue.js from ‘vue’
import Vuex from ‘vuex’

Vue.use(Vuex)

export default new Vuex.Store({
state: {
posts: [],
},
mutations: {
ADD_POST(state,postObj){
state.posts.push(postObj);
alert(state.posts);
},
INIT_POST(state,postObj){
postObj.forEach(element => {
state.posts.push(element);
});
},
},
actions: {

}
})

Solution :

You can try using mapGetters like this.

<script>
import store from ‘../store’
import { mapGetters } from ‘vuex’

export default {
computed:{
…mapGetters({
posts: ‘getPosts’
})
},
async created(){
let data = await fetch(‘http://localhost:5000/v1/api/posts');
data = await data.json();
this.$store.commit(‘INIT_POST’, data);
},
}
</script>

now the computed var “items” its accessible as “posts”.

And in the Store.js

import vue.js from ‘vue’
import Vuex from ‘vuex’

Vue.use(Vuex)

export default new Vuex.Store({
state: {
posts: [],
},
getters: {
getPosts(state) {
return state.posts
}
},
mutations: {
ADD_POST(state,postObj){
state.posts.push(postObj);
alert(state.posts);
},
INIT_POST(state,postObj){
postObj.forEach(element => {
state.posts.push(element);
});
},
},
actions: {

}
})

Solution 2:

It’s vue.js reactivity caveat. You need to update state.posts object to make vuex reactive. Please try:

ADD_POST(state,postObj){
state.posts = state.posts.concat([postObj])
},

Solution 3:

You are using Vuex incorrectly.

If you set it up right, the store should be available as this.$store, and the computed value should look like

computed:{
items:function(){
return this.$store.state.posts;
},
},

[Vue.js] Pausing and restarting my custom vue slider

I made a custom vue.js slider and it works so far but I had the idea to add pause/play button to my slider, issue is I don’t know how can I handle pausing and resuming setInterval function of my slider, a function to toggle pause/play in my component but I’m not sure how I can implement this functionality.

Here is my component:

<template>
<section class=”SLIDERcontainer8_maincontainer”>
<transition-group name=”slider-fade”>
<div class=”SLIDERcontainer8_image move” :style=”‘background-image:url(‘+item.image+’);’” v-for=”(item, index) in slideritems” :key=”item.title” :class=”{ ‘active_slider’ : activeslider == index }”></div>
</transition-group>
<div class=”SLIDERcontainer8_dots_container”>
<button class=”SLIDERcontainer8_dot fs_normal c_light” :class=”{ ‘active_dot’ : index == activeslider }” v-for=”(slider, index) in slideritems” :key=”index” @click=”goToSlider(index)” type=”button”>{ slider.title }</button>
</div>
</section>
</template>
<!–SCRIPTS–>
<script>
import { mapState } from ‘vuex’;
export default {
name: ‘SLIDERcontainer7’,

computed:
{
…mapState(‘Globals’, [‘globals’])
},

props:
{
sliderinterval: { default: 5000, type: Number },
slideritems: { required:true }
},

data() {
return {
sliderTimer: 0,
activeslider: 0,
}
},

mounted() {
console.log(this.$options.name+’ component successfully mounted’);
this.startSlider();
},

methods:{

startSlider() {
var self = this;
this.activeslider = 0;
clearInterval(this.sliderTimer);
this.sliderTimer = setInterval(() => {
self.nextSlider() }, self.sliderinterval);
},

prevSlider() {
if(this.activeslider == 0){
this.activeslider = this.slideritems.length - 1;
}
else{
this.activeslider = this.activeslider - 1;
}
},

nextSlider() {
if(this.activeslider == this.slideritems.length - 1){
this.activeslider = 0;
}
else{
this.activeslider = this.activeslider + 1;
}
},

goToSlider (sliderIndex) {
var self = this;
this.activeslider = sliderIndex;
clearInterval(this.sliderTimer);
this.sliderTimer = setInterval(() => {
self.nextSlider() }, self.sliderinterval);

},

}

};
</script>
<!–STYLES–>
<style scoped>
.active_slider{display:flex !important;}
.active_dot{background-color:var(–web_primary_color) !important;}
.SLIDERcontainer8_maincontainer{width:100%; height:70vh; position:relative; overflow:hidden; margin:0px 0px 0px 0px;}
.SLIDERcontainer8_image{display:none; width:100%; height:100%; background-size:cover; background-position:center; position:absolute; top:0px; left:0px;}
.SLIDERcontainer8_dots_container{width:100%; height:75px; flex-wrap:no-wrap; background-color:rgba(49,47,84,0.95); display:flex; justify-content:center; align-items:center; position:absolute; bottom:0px; left:0px;}
.SLIDERcontainer8_dot{cursor:pointer; height:100%; display:flex; border-right:1px solid rgba(0,0,0,0.2); align-items:center; justify-content:center; text-align:center; flex:1; padding:0px 20px;}
.SLIDERcontainer8_dot:hover{background-color:var(–web_primary_color) !important;}
@media only screen and (max-width: 736px)
{
.SLIDERcontainer8_maincontainer{width:100%; height:250px; position:relative; overflow:hidden; margin:0px 0px 0px 0px;}
.SLIDERcontainer8_image{display:none; width:100%; height:100%; background-size:cover; background-position:center; position:absolute; top:0px; left:0px;}
.SLIDERcontainer8_dots_container{width:100%; height:40px; flex-wrap:no-wrap; background-color:rgba(49,47,84,0.95); display:flex; justify-content:center; align-items:center; position:absolute; bottom:0px; left:0px;}
.SLIDERcontainer8_dot{width:15px; height:15px; text-indent: -9999px; background-color:white; display:flex; border-radius:50%; margin:0px 5px; border-right:0px solid rgba(0,0,0,0.2); align-items:center; justify-content:center; text-align:center; flex:none; padding:0px 0px;}
.SLIDERcontainer8_dot:hover{background-color:var(–web_primary_color) !important;}
}
</style>

Please help me out.

Solution :

You can add pause and resume methods to clear and set new interval.

methods: {

pauseSlider () {
clearInterval(this.sliderTimer);
},

resumeSlider () {
this.sliderTimer = setInterval(() => {
this.nextSlider()
}, this.sliderinterval)
}


}

If you want to restart just call the startSlider instead.

[Vue.js] How do I need to reference an external file in Vue.js

when new to Vue.JS and when adding an external component that only has a JavaScript reference. The component is Stimulsoft.js and there is the files loaded into the correct folders. I’ve tried to follow the github information at

https://github.com/stimulsoft/Samples-JS/blob/master/Vue.js/02.%20Working%20with%20report%20viewer/index.html

but since my Vue.js file is structured as a module application there is different .vue.js page structure.

The GitHub sample show it referencing the .js files like.

<script src=”stimulsoft/stimulsoft.reports.js”></script>
<script src=”stimulsoft/stimulsoft.viewer.js”></script>

on the index.html. However when I use that structure I’m not sure the files even load and they give an error to the vue.js page that needs to use them. Do I need to reference them on the actual vue.js page? and if so how?

The stimulsoft.vue.js files needs to reference the stimulsoft.viewer.js and stimulsoft.report.js file.

there is tried every combination of stimulsoft/stimulsoft.viewer.js, ./stimulsoft/stimulsoft.viewer.js and ../stimulsoft/stimulsoft.viewer.js but to no avail.

Thanks for the help

Solution :

With some chance you have a packaged version of the stimulsoft library: https://www.npmjs.com/search?q=stimulsoft