Discussion
Discussion copied to clipboard
Bind images loaded
Hi,
I would like to bind that external images are loaded in a
Do you have any idea ?
Vue.config.debug = true;
Vue.http.options.root = 'https://my-url';
Vue.filter('cut', function(value) {
return value.substring(0,100)+'...';
});
var SpacesModel = {
space: {
id: '',
name: '',
address: '',
postal_code: '',
city: '',
latitude: '',
longitude: '',
capacity: '',
occupancy: '',
thumbnail: '',
pictures: '',
description: '',
opening_times: ''
},
spaces: [],
city: {
name: ''
},
cities: []
};
var SpacesVue = Vue.extend({
methods: {
// We dedicate a method to retrieving and setting some data
fetchSpaces: function() {
var spaces = [];
this.$http.get(this.$http.options.root+'/spaces')
.success(function(response) {
this.$set('spaces', response.spaces);
this.fetchCities(response.spaces);
$('.loader').fadeOut();
})
.error(function(error) {
console.log(error);
});
},
// Adds an event to the existing events array
fetchCities: function(spaces) {
var cities = [],
tmp = [];
for (var i in spaces) {
if (tmp.indexOf(spaces[i].city) < 0) {
var current = {
'name': spaces[i].city
};
cities.push(current);
}
tmp.push(spaces[i].city);
}
this.$set('cities', cities);
}
}
});
var SpacesFilter = new SpacesVue({
// We want to target the div with an id of 'spaces'
el: '#spaces',
// Here we can register any values or collections that hold data
// for the application
data: $.extend(SpacesModel, { selected: '' }),
directives: {
image: {
bind: function(){
//console.log(this.el);
console.log(this.el);
}
}
},
watch: {
image: function (oldVal, newVal) {
console.log(oldVal, newVal);
}
},
computed: {
defaultSelected: {
get: function () {
if( this.cities.length > 0 ){
this.cities = this.sort(this.cities);
return this.cities[0].id;
}
}
}
},
ready: function() {
this.fetchSpaces();
},
methods: {
loadMap: function(){
this.$nextTick(function(el){
console.log(el);
$('.gmap-wrapper').css({'height' : $('#main-wrapper').outerHeight() + 40 + 'px' });
console.log('BIS : ' + $('#main-wrapper').outerHeight());
initMap();
});
},
// We dedicate a method to retrieving and setting some data
fetchSpaces: function() {
var spaces = [];
//return this.$http.get('/spaces');
this.$http.get(this.$http.options.root+'/spaces').success(function(response) {
this.$set('spaces', response.spaces);
this.fetchCities(response.spaces);
this.$set('selected', this.defaultSelected);
//$('.loader').fadeOut().remove();
this.loadMap();
return true;
})
.error(function(error) {
console.log(error);
return false;
});
},
sort: function( obj ){
obj.sort(function(a, b){
var nameA=a.name.toLowerCase(), nameB=b.name.toLowerCase();
if (nameA < nameB){ //sort string ascending
return -1; }
if (nameA > nameB){
return 1;
}
return 0; //default return value (no sorting)
});
return obj;
}
}
});
thank's for your help.