this

this

关注
发信
关注(28)粉丝(399)

如何使用Axios从外部文件将数据加载到Vue

本文介绍了如何使用Axios从外部文件将数据加载到Vue的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

您将如何使用外部JSON文件替换此示例中的图像"数据数组?基本上，我想使用axios从外部获取/获取此数据，但是在此示例中，某些操作尚不完善.任何线索都非常感谢！

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!

如果您喜欢这样看的话，我还为该示例创建了一个CodePen，它无需外部引用即可工作.非常感谢！ https://codepen.io/FloydGekko/pen/eLoRBQ

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

这是html，css和vue.js代码:

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

<head>
    <style>
        [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;
        }
    </style>
</head>

<body>

<div id="vue" v-cloak>
    <h2 align="center">
        Show
    <select v-model="currentKind" @change="onChange">
        <option v-for="kind, index in kinds" :value="kind" :key="`kind_${index}`">{{kind ? kind : 'kind...'}}</option>
    </select>
    <select v-model="currentColor" @change="onChange">
        <option v-for="color, index in colors" :value="color" :key="`kind_${index}`">{{color ? color : 'color...'}}</option>
    </select>
        and
     <select v-model="currentShape" @change="onChange">
        <option v-for="shape, index in shapes" :value="shape" :key="`kind_${index}`">{{shape ? shape : 'shape...'}}</option>
    </select>
    </h2>

    <isotope
            id="root_isotope"
            ref="isotope"
            :options='options'
            :list="images"
            align="center">
        <div class="polaroid" align="center"
            v-for="(image, index) in images"
            class="imageBlock"
            :key="image.id">
            <a target="_blank"  :href="image.url"><img border="0" :src="image.pic" alt=""
            style="
                border-radius: 20px;
                display: block;
                margin-left: auto;
                margin-right: auto;
                width: 100%;">
            </a>
            <div class="container">
                <a target="_blank"  :href="image.url">
                <h3 align="center">{{image.title}}</h3>
                </a>


            <!--<h1>{{image.kind}}</h1>
            <h1>{{image.color}}</h1>
            <h1>{{image.shape}}</h1>
            <h1>{{image.id}}</h1>-->
            </div>
        </div>
    </isotope>
    <h2 align="center">
        <button @click="reset">Show all</button>
    </h2>
</div>


<script src='https://unpkg.com/vue/dist/vue.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.13.1/lodash.min.js'></script>
<script src='https://npmcdn.com/isotope-layout@3.0.6/dist/isotope.pkgd.min.js'></script>
<script src='https://rawgit.com/David-Desmaisons/Vue.Isotope/master/src/vue_isotope.js'></script>
<script src='https://unpkg.com/axios/dist/axios.min.js'></script>

<script>
    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;
                });
            }
        },
    });

</script>


</body>

</html>

这是我尝试通过axios加载的外部JSON文件"myimagedata.json":

And this is the external JSON file "myimagedata.json" I try to load with axios:

{
    "images": [
        {
            "id": 1,
            "kind": ["A"],
            "color": ["Green", "Blue"],
            "shape": ["Square"],
            "pic": "http://r.ddmcdn.com/s_f/o_1/cx_462/cy_245/cw_1349/ch_1349/w_720/APL/uploads/2015/06/caturday-shutterstock_149320799.jpg",
            "url": "http://r.ddmcdn.com/s_f/o_1/cx_462/cy_245/cw_1349/ch_1349/w_720/APL/uploads/2015/06/caturday-shutterstock_149320799.jpg",
            "title": "A"
        },
        {
            "id": 2,
            "kind": ["B"],
            "color": ["Green", "Red"],
            "shape": ["Circle"],
            "pic": "https://www.kimballstock.com/pix/DOG/05/DOG-05-JE0078-01P.JPG",
            "url": "https://www.kimballstock.com/pix/DOG/05/DOG-05-JE0078-01P.JPG",
            "title": "B"
        }
    ]
}

推荐答案

在axios中，您应该可以执行以下操作.您可能需要编写var self = this.外部库将自己重写this，以便访问vue this变量，您需要预先设置一个变量，然后使用新变量来设置数据.以后，请显示有问题的代码(例如loadImages())，并显示错误(如果有的话).

In axios you should be able to do something like is below. You may need to write a var self = this. External libs rewrite this as their own so to access the vue this variable you will need to set a variable beforehand and use the new variable to set your data. In the future please show your code in question like your loadImages() and the error if any you were getting.

var self = this
axios.get('/myimagedata.json')
  .then(function (response) {
    self.images = response.data.images
  })
  .catch(function (err) {
    console.error(err)
  })

在这里您的json回复

{
"images": [{
        "id": 1,
        "kind": ["A"],
        "color": ["Green", "Blue"],
        "shape": ["Square"],
        "pic": "http://r.ddmcdn.com/s_f/o_1/cx_462/cy_245/cw_1349/ch_1349/w_720/APL/uploads/2015/06/caturday-shutterstock_149320799.jpg",
        "url": "http://r.ddmcdn.com/s_f/o_1/cx_462/cy_245/cw_1349/ch_1349/w_720/APL/uploads/2015/06/caturday-shutterstock_149320799.jpg",
        "title": "A"
    },
    {
        "id": 2,
        "kind": ["B"],
        "color": ["Green", "Red"],
        "shape": ["Circle"],
        "pic": "https://www.kimballstock.com/pix/DOG/05/DOG-05-JE0078-01P.JPG",
        "url": "https://www.kimballstock.com/pix/DOG/05/DOG-05-JE0078-01P.JPG",
        "title": "B"
    }
]

}

这篇关于如何使用Axios从外部文件将数据加载到Vue的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

07-02 23:57
Powered by LMLPHP ©2024 this 0.038737