axios vue 加载效果动画_如何使用Axios从外部文件将数据加载到Vue

how would you go about replacing the "image" data array in this example with an external JSON file? Basically I want to fetch/get this data externally with axios but something is not quite working yet in this example. Any clue very much appreciated!

I also created a CodePen for this example working without the external reference if you prefer to look at it this way. Thanks a lot!

https://codepen.io/FloydGekko/pen/eLoRBQ

This is the html, css and vue.js code:

[v-cloak] {

display: none;

}

.imageBlock{

width:100%;

margin:10px;

}

div.polaroid {

width:310px;

height:440px;

margin:10px;

background-color: white;

box-shadow: 6px 4px 8px 0 rgba(0, 0, 0, 0.2), 6px 6px 20px 0 rgba(0, 0, 0, 0.19);

margin-bottom: 25px;

border-radius: 18px

}

div.container {

text-align: center;

padding: 10px 20px;

}

Show

{{kind ? kind : 'kind...'}}

{{color ? color : 'color...'}}

and

{{shape ? shape : 'shape...'}}

id="root_isotope"

ref="isotope"

:options='options'

:list="images"

align="center">

v-for="(image, index) in images"

class="imageBlock"

:key="image.id">

style="

border-radius: 20px;

display: block;

margin-left: auto;

margin-right: auto;

width: 100%;">

{{image.title}}

Show all

let currentKind = null;

let currentColor = null;

let currentShape = null;

let imageSearchString = null;

var vm = new Vue({

el: '#vue',

data() {

return {

currentKind:'',

currentColor:'',

currentShape:'',

options: {

itemSelector: ".imageBlock",

getSortData: {

id: "id"

},

sortBy : "id",

getFilterData: {

Finder: function(itemElem) {

let kindSearch = currentKind ? itemElem.kind.indexOf(currentKind) !== -1 : true;

let colorSearch = currentColor ? itemElem.color.indexOf(currentColor) !== -1 : true;

let shapeSearch = currentShape ? itemElem.shape.indexOf(currentShape) !== -1 : true;

return kindSearch && colorSearch && shapeSearch

},

},

},

images: '',

};

},

computed: {

kinds(){

let allTags = _.flatten(this.images.map(image => image.kind))

return [''].concat(_.uniq(allTags))

},

colors(){

let allTags = _.flatten(this.images.map(image => image.color))

return [''].concat(_.uniq(allTags))

},

shapes(){

let allTags = _.flatten(this.images.map(image => image.shape))

return [''].concat(_.uniq(allTags))

},

},

mounted(){

setTimeout(()=>{

this.onChange()

}, 200)

},

created: function () {

this.loadImages();

},

methods: {

onChange: function() {

currentColor = this.currentColor;

currentShape = this.currentShape;

currentKind = this.currentKind;

this.$refs.isotope.filter('Finder');

this.$refs.cpt.layout('packery');

},

reset(){

currentColor = '';

currentShape = '';

currentKind = '';

this.currentColor = '';

this.currentShape = '';

this.currentKind = '';

this.onChange()

},

// THIS IS THE PART OF THE CODE IN QUESTION I THINK

loadImages: function () {

var vm = this;

axios.get('myimagedata.json')

.then(function (response) {

vm.images = response.data.images;

})

.catch(function (error) {

vm.images = 'An Error occured.' + error;

});

}

},

});