Open Cezarion opened 9 years ago
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.
Hi,
I would like to bind that external images are loaded in a
Do you have any idea ?
thank's for your help.