Fatal编程技术网
  • vue.js/
  • Vue.js 如何使用Axios从外部文件将数据加载到Vue中

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

vue.js

Vue.js 如何使用Axios从外部文件将数据加载到Vue中,vue.js,axios,Vue.js,Axios,如何用外部JSON文件替换本例中的图像数据数组？基本上，我希望使用axios从外部获取/获取这些数据，但在本例中有些东西还没有完全起作用。非常感谢任何线索 如果您愿意这样看，我还为这个示例创建了一个代码笔，它在没有外部引用的情况下工作。谢谢！ 这是html、css和vue.js代码： <head> <style> [v-cloak] { display: none; } .imageBlock

如何用外部JSON文件替换本例中的图像数据数组？基本上，我希望使用axios从外部获取/获取这些数据，但在本例中有些东西还没有完全起作用。非常感谢任何线索

如果您愿意这样看，我还为这个示例创建了一个代码笔，它在没有外部引用的情况下工作。谢谢！

这是html、css和vue.js代码：

<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中，您应该能够执行以下操作。您可能需要编写一个var self=this。外部LIB将其重写为自己的，因此要访问vue此变量，您需要事先设置一个变量，并使用新变量设置数据。将来，请显示有问题的代码，如loadImages和错误（如果有）

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上尝试的loadImages方法吗？我添加了您的建议，但它仍然无法从JSON加载数据。我觉得很近，但少了一点点。我将初始问题更新为最新版本，并实施了您的建议。谢谢！没问题。我注意到您将图像设置为字符串而不是空数组。将图像：更改为图像：[]。在加载图像之前，您的计算组件不能在空字符串上加载地图。Travor，您就是那个人！它起作用了！非常感谢你的帮助和帮助。非常感谢！它基本上在Firefox中工作，但不幸的是在Chrome中没有。另外，当我在服务器上运行跨源请求时，它被阻止，因此我尝试仅在vue.js中执行此操作，并在此处创建了一个新帖子： 
{
"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"
    }
]