I've got a working script that runs fine under Vue 1.x but it doesn't work with Vue 2.x even though I have replaced ready by mounted
<div id="app">
<div id="slider"></div>
<input id="slider-input" v-model="third" v-on:change="updateSlider"/>
<input id="slider-input" v-model="fourth" v-on:change="updateSlider"/>
</div>
Vue 1.x:
var vue = new Vue({
el: '#app',
data: {
first: 3,
second: 2,
third: 40,
fourth: 60,
slider: {
min: 0,
max: 100,
start: [50, 60],
step: 1
},
Slider: document.getElementById('slider')
},
computed: {
total: function total() {
return parseInt(this.first) * parseInt(this.second) * parseInt(this.third);
}
},
methods: {
updateSlider: function updateSlider() {
this.Slider.noUiSlider.set(this.third);
}
},
ready: function ready() {
noUiSlider.create(this.Slider, {
start: this.slider.start,
step: this.slider.step,
range: {
'min': this.slider.min,
'max': this.slider.max
}
});
}
});
Now I have replaced ready with mounted and it's still not working. Problem is, it doesn't even spit out an error message in the console.
My guess is that the <div id="slider"> in the template is being replaced with a different element instance once Vue has compiled the full template and rendered itself (after mounting). What I mean is, in the mounted hook, this.Slider and document.getElementById('slider') no longer refer to the same element (this.Slider is removed from the DOM).
There's probably no reason for Slider to be defined within the data block (it needn't be reactive), just initialize that in the mounted hook instead:
mounted() {
this.Slider = document.getElementById('slider')
noUiSlider.create(this.Slider, ...)
}
Actually, a better way would be to use ref to get an instance of the element instead of querying the DOM:
<div ref="slider"></div>
mounted() {
noUiSlider.create(this.$refs.slider, ...)
}
It was because mounted does not support functions, you had to create the functions in methods and just call it from mounted.
Related
I would like to access refs in a vue.js component, where the ref itself is created dynamically like so:
<style>
</style>
<template>
<div>
<lmap class="map" v-for="m in [1, 2, 3]" :ref="'map' + m"></lmap>
</div>
</template>
<script>
module.exports = {
components: {
lmap: httpVueLoader('components/base/map.vue'),
},
mounted: function(){
console.log('all refs', this.$refs);
// prints an object with 3 keys: map1, map2, map3
console.log('all ref keys', Object.keys(this.$refs));
// would expect ["map1", "map2", "map3"], prints an empty array instead
Vue.nextTick().then(() => {
console.log('map1', this.$refs["map1"]);
// would expect a DOM element, instead prints undefined
})
},
destroyed: function(){
},
methods: {
},
}
</script>
However this seems not to work (see above in the comments), and I can't figure why.
I think the problem is that you are importing the component asynchronously, with httpVueLoader, which then downloads and imports the component only when the component is rendered from the dom, therefore, the component has not yet been imported into the nextTick callback.
I suggest you put a loaded event in the map.vue component, maybe in mounted lifecycle , which will be listened to in the father, example #loaded = "showRefs"
surely when the showRefs(){ } method is invoked, you will have your refs populated ;)
Try using a template string e.g
`map${m}`
You have to wait until components have been rendered / updated. This works:
module.exports = {
data: function () {
return {
};
},
components: {
lmap: httpVueLoader('components/base/map.vue'),
},
mounted: function(){
},
destroyed: function(){
},
updated: function(){
Vue.nextTick().then(() => {
console.log('all ref keys', Object.keys(this.$refs));
console.log('map1', this.$refs['map1'][0].$el);
})
},
methods: {
},
}
I've created a component in vue which wraps a vue-apexchart donut graph. As soon as the page loads and this component is loaded, the vue-apexchart animates and displays a small graph.
Now I would like to instantiate multiple of these components from a dataset side by side. Instead of the components to all load an animate at the same time, I would like a small rendering delay to give it an overall nice effect. Something like this would be nice:
<donut :items="series1"></donut>
<donut :items="series2" delay=1500></donut>
The vue-apexchart doesent support initialization delays, and as far as I can see there isn't any vue-specific official solution to delay the rendering of components.
I've tried to put a setTimeout in any of the component hooks to stall the initialization,
I´ve also tried to inject the all the graph DOM in the template element on a v-html tag in a setTimeout, but apexchart doesent notice this new dom content, and vue doesent notice the html bindings either.
I´ve created this fiddle which loads two instances of a graph:
https://jsfiddle.net/4f2zkq5c/7/
Any creative suggestions?
There are several ways you can do this, and it depends on whether you can actually modify the <animated-component> logic yourself:
1. Use VueJS's built-in <transition-group> to handle list rendering
VueJS comes with a very handy support for transitions that you can use to sequentially show your <animated-component>. You will need to use a custom animation library (like VelocityJS) and simply store the delay in the element's dataset, e.g. v-bind:data-delay="500". VueJS docs has a very good example on how to introduce staggered transitions for <transition-group>, and the example below is largely adapted from it.
You then use the beforeAppear and appear hooks to set the opacity of the individual children of the <transition-group>.
Vue.component('animated-component', {
template: '#animatedComponentTemplate',
props: {
data: {
required: true
}
}
});
new Vue({
el: '#app',
data: {
dataset: {
first: 'Hello world',
second: 'Foo bar',
third: 'Lorem ipsum'
}
},
methods: {
beforeAppear: function(el) {
el.style.opacity = 0;
},
appear: function(el, done) {
var delay = +el.dataset.delay;
setTimeout(function() {
Velocity(
el, {
opacity: 1
}, {
complete: done
}
)
}, delay)
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<transition-group name="fade" v-on:before-appear="beforeAppear" v-on:appear="appear">
<animated-component v-bind:data="dataset.first" v-bind:key="0"> </animated-component>
<animated-component v-bind:data="dataset.second" v-bind:key="1" v-bind:data-delay="500"> </animated-component>
<animated-component v-bind:data="dataset.third" v-bind:key="2" v-bind:data-delay="1000"> </animated-component>
</transition-group>
</div>
<script type="text/x-template" id="animatedComponentTemplate">
<div>
<h1>Animated Component</h1>
{{ data }}
</div>
</script>
2. Let <animated-component> handle its own rendering
In this example, you simply pass the a number to the delay property (remember to use v-bind:delay="<number>" so that you pass a number and not a string). Then, in the <animated-component>'s mounted lifecycle hook, you use a timer to toggle the visibility of the component itself.
The technique on how you want to show the initially hidden component is up to you, but here I simply apply an initial opacity of 0 and then transition it after a setTimeout.
Vue.component('animated-component', {
template: '#animatedComponentTemplate',
props: {
data: {
required: true
},
delay: {
type: Number,
default: 0
}
},
data: function() {
return {
isVisible: false
};
},
computed: {
styleObject: function() {
return {
opacity: this.isVisible ? 1 : 0
};
}
},
mounted: function() {
var that = this;
window.setTimeout(function() {
that.isVisible = true;
}, that.delay);
}
});
new Vue({
el: '#app',
data: {
dataset: {
first: 'Hello world',
second: 'Foo bar',
third: 'Lorem ipsum'
}
}
});
.animated-component {
transition: opacity 0.25s ease-in-out;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<animated-component v-bind:data="dataset.first"> </animated-component>
<animated-component v-bind:data="dataset.second" v-bind:delay="500"> </animated-component>
<animated-component v-bind:data="dataset.third" v-bind:delay="1000"> </animated-component>
</div>
<script type="text/x-template" id="animatedComponentTemplate">
<div class="animated-component" v-bind:style="styleObject">
<h1>Animated Component, delay: {{ delay }}</h1>
{{ data }}
</div>
</script>
If you have the possibility to reformat your data, you can build an array of series objects, add a show: true/false property and iterate it:
//template
<div v-for="serie in series">
<donut :items="serie.data" v-if="serie.show"></donut>
</div>
//script
data: function() {
return {
series: [
{ data: [44, 55, 41, 17, 15], show: false },
{ data: [10, 20, 30], show: false },
]
}
}
Now you can create a setTimeout function which will change the serie.show to true by incrementing the delay based on the serie index.
Then add the function on the mounted hook:
methods: {
delayedShow (serie, idx) {
let delay = 1500 * idx
setTimeout(() => {
serie.show = true
}, delay)
}
},
mounted () {
this.series.forEach((serie, idx) => {
this.delayedShow(serie, idx)
})
}
Live example
Faced the same problem with ApexCharts Pie Charts being redrawn rapidly in sequence due to data being pulled from a pinia store mutating too quickly for the chart to keep up, leading to ugly errors in the console.
I resolved the issue by using a boolean ref in a v-if="showChart" on the component and then using a setTimeout to trigger a delayed drawing of the chart:
import { ref } from "vue";
import useStore from "#/store/myChartStore";
const store = useStore();
const showChart = ref(false);
store.$subscribe((mutation, state) =>{
showChart.value = false;
setTimeout(()=> {
showChart.value = true;
}
, 100);
});
If you're not using a store, you may find another way to watch the initial availability of the chart data and then delay the rendering using that same approach.
I am very new to Vue.js and we are working on adding in Vue.js into an existing project piece by piece. I'm working on rewriting the product slider in Vue. It is currently using the jquery slick slider. So in the current/old code in the html this js function is being called:
function productDetailsRecommendations(compositeNumbers) {
var params = {
compositeNumbers: compositeNumbers,
strategy: 'pp12',
backupStrategy: 'popular',
divId: 'recommendedProductsHorizontal',
isVertical: false,
isHideHeaderText: false,
headerText: 'Guests Who Viewed This Item Also Viewed These',
backupHeaderText: 'Popular Products',
itemsPerPage: 5,
itemDisplayLimit: 10,
numberOfItems: 15,
responseMap: null
};
createSlider(params);
}
Now I am using vue-carousel to recreate the slider. So I replaced that call with my own copied function: productDetailsRecommendationsVue.
Now I have created a ProductRecommendationsSlider.vue as the slider component. And I have a index.js as the entry point where the slider gets initialized.
Now my boss told me I need to put the productDetailsRecommendationsVue function into index.js.
// index.js
import Vue from 'vue';
import axios from 'axios';
import VueCarousel from 'vue-carousel';
import Slider from '/components/slider/ProductRecommendationsSlider'
Vue.use(VueCarousel);
window.productDetailsRecommendationsVue=function(compositeNumbers) {
var params = {
compositeNumbers: compositeNumbers,
strategy: 'pp12',
backupStrategy: 'popular',
divId: 'recommendedProductsHorizontal',
isVertical: false,
isHideHeaderText: false,
headerText: 'Guests Who Viewed This Item Also Viewed These',
backupHeaderText: 'Popular Products',
itemsPerPage: 5,
itemDisplayLimit: 10,
numberOfItems: 15,
responseMap: null
};
};
/* eslint-disable no-new */
new Vue({
el: '#itemDetailPage #recommendedProductsHorizontal .imageSlider',
components: {
Slider,
'carousel': VueCarousel.Carousel,
'slide': VueCarousel.Slide
},
template: '<product-slider></product-slider>'
});
But my main question is how do I get those parameters into the component?
They are needed in one of the functions in ProductRecommendationsSlider.vue. My boss said I was on the right track with placing the js function there in the index.js. All the tutorials I've found online talk about building a project from scratch. Tying Vue into an existing project is much more difficult IMO.
Since you're using single file components (*.vue within a Vue CLI generated project), your project already has modularization support, so you wouldn't need to attach properties/functions to the window object. Instead, you could encapsulate your static properties/functions within the component file itself:
// ProductRecommendationsSlider.vue
<script>
function productDetailsRecommendations() {
return { /*...*/ }
}
export default {
data() {
params: {}
},
methods: {
loadParams() {
this.params = productDetailsRecommendations();
}
}
}
</script>
or in separate files that you could import into your component:
// ProductRecommendationsSlider.vue
<script>
import { productDetailsRecommendations } from '#/utils';
export default {
data() {
params: {}
},
methods: {
loadParams() {
this.params = productDetailsRecommendations();
}
}
}
</script>
// <root>/src/utils.js
export function productDetailsRecommendations() {
return { /*...*/ }
}
Then, you could bind those parameters to your vue-carousel properties. Note only some of the parameters in your example appear to be supported by vue-carousel (unsupported marked by n/a):
"strategy": "pp12", // n/a
"backupStrategy": "popular", // n/a
"divId": "recommendedProductsHorizontal", // ID of container div
"isVertical": false, // n/a
"isHideHeaderText": false, // true = hide `headerText` h3; false = show it
"headerText": "Guests Who Viewed This Item Also Viewed These", // h3 text content (isHideHeaderText: true)
"backupHeaderText": "Popular Products", // h3 text content (isHideHeaderText: false)
"itemsPerPage": 5, // vue-carousel perPage
"itemDisplayLimit": 10, // n/a
"numberOfItems": 15, // vue-carousel item count
"responseMap": null // n/a
Example data bindings:
<template>
<div class="product-slider" :id="params.recommendedProductsHorizontal">
<h3 v-if="!params.isHideHeaderText">{{params.headerText}}</h3>
<carousel :perPage="params.itemsPerPage">
<slide v-for="i in params.numberOfItems" :key="i">
<span class="label">{{i}}</span>
</slide>
</carousel>
<section>
<button #click="loadParams">Load params</button>
<pre>params: {{params}}</pre>
</section>
</div>
</template>
demo
You can assign window.productDetailsRecommendationVue in vue data or computed properties
1) Change window.productDetailsRecommendationsVue from a function to
window.productDetailsRecommendationsVue = {
//compositeNumbers: "I have no idea where this comes from but it could be passed separately",
strategy: "pp12",
backupStrategy: "popular",
divId: "recommendedProductsHorizontal",
isVertical: false,
isHideHeaderText: false,
headerText: "Guests Who Viewed This Item Also Viewed These",
backupHeaderText: "Popular Products",
itemsPerPage: 5,
itemDisplayLimit: 10,
numberOfItems: 15,
responseMap: null
};
2) inside of your vue instance of index.js assign window.productDetailsRecommendtionsVue to a data property:
new Vue({
el: '#itemDetailPage #recommendedProductsHorizontal .imageSlider',
components: {
Slider,
'carousel': VueCarousel.Carousel,
'slide': VueCarousel.Slide
},
data: {
oldSliderData: window.productDetailsRecommendationsVue
}
template: '<product-slider></product-slider>'
});
It is now accessible to components using the standard prop process. I'm not sure where is coming from b/c I don't see it imported.
I am trying to reproduce a map app using openLayer API with VUE and this setCenter() function doesn't work on my second call of it. In the following snippet of code, the map would be initialized with a random centre of [60,60] and then when i input an number to update its Latitude it works ok, but when i try to change the centre again by repeating the step with a different input the map simply doesn't update the view.
In browser console, however,
window.map.getView().getCenter()
would give the latest coordinates that i want.
The reason why map is initialized in a setTimeout() fashion is how i imported openLayer using <script> tags in my index.html file. Therefore why must the map instance be bounded to window.
Here is the code:
<template>
<div id="map" class="map">
<input type="text" #keyup.enter="changeCenter" v-model="center">
</div>
</template>
<script>
export default {
name: "Olmap",
props: ["InitCenter"], //[60,60]
data(){
return{
center: ""
}
},
components:{
topInfoBar
},
methods:{
changeCenter: function(){
window.changeCenter([parseInt(this.center), 40])
}
},
created(){
setTimeout(()=>{
var map = new window.ol.Map({
target: 'map',
layers: [
new window.ol.layer.Tile({
source: new window.ol.source.OSM()
})
],
view: new window.ol.View({
center: window.ol.proj.fromLonLat(this.InitCenter),
zoom: 4
})
});
window.map = map;
},50);
var changeCenter = function(center){
window.map.getView().setCenter(center);
}
window.changeCenter = changeCenter;
},
}
</script>
Anyone can help me with this?
I'm new to vue and have a really hard time getting it working. I made a single file component for my google maps div:
map.vue:
<template>
<div id="map" class="col-100">{{searchArea.radius}}</div>
</template>
<script>
function updateSearchLocation(latlng) {
this.searchArea.lat = latlng.lat();
this.searchArea.long = latlng.lng();
}
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
streetViewControl: false,
mapTypeControl: false,
zoomControl: false
});
google.maps.event.addListener(map, 'dragend', function() {
updateSearchLocation(map.getCenter());
});
addMyLocationButton();
getMyLocation();
}
window.initMap = initMap;
module.exports = {
props: {
searchArea: Object
}
}
</script>
The other functions called here (addMyLocationButton, getMyLocation) are also defined in this file and working. What's not working is accessing the searchArea object within the updateSearchLocation function.
I have a searchArea object in the root of my app:
searchArea: {
lat: null,
long: null,
radius: 2500
}
It's succesfully passed to this component (I can see it on this component in the vue dev tools). I want to use this map.vue component to update this object because in another component I'm making API calls based on this object.
The map is showing, so initMap is being called. The getMyLocation method gets the current location of the user, and then calls the same updateSearchLocation function.
Loading my map like this:
<script async defer src="https://maps.googleapis.com/maps/api/js?key=xxx&callback=initMap"></script>
put functions into exported object within 'methods' object:
module.exports = {
props: {
searchArea: Object
},
data: function() {
return {
latlng: whatever
}
},
methods: {
updateSearchLocation: function(this.latlng) {..... },
initMap: function() {.. call updateSearchLocation() as this.updateSearchLocation(this.latlng) ... },
}
}