Как загрузить данные в vue.js из внешнего файла, используя только vue - PullRequest
Новая
       3

Как загрузить данные в vue.js из внешнего файла, используя только vue

0 голосов
/ 28 сентября 2018

в этом примере ниже, я пытаюсь загрузить массив 'images' из внешнего файла js, используя только vue.Я попробовал что-то похожее на этот пост: Как мне получить доступ к данным из внешнего файла в Vue.js, пожалуйста? , но у меня это не совсем работает (скорее всего, потому что я делаю что-то явно неправильное).Любые советы о том, как сделать так, чтобы это работало, очень ценятся.

Я создал codePen для вас, если вы предпочитаете смотреть на это так.Спасибо!https://codepen.io/FloydGekko/pen/eLoRBQ

<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>
            </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>
    let currentKind = null;
    let currentColor = null;
    let currentShape = 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
                        },
                    },
                },

        //THIS IS THE ARRAY IM TRYING TO LOAD FROM AN EXTERNAL FILE
                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',
                    },
                ],

            };
        },
        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))
            },
        },
        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()
            }
        },
    });
</script>
</body>
</html>

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

1 Ответ

0 голосов
/ 28 сентября 2018

Это действительно зависит от того, что означает «внешний» и что означает «только Vue».Если у вас есть контроль над данными, их структурой и местоположением, вы можете сделать что-то вроде того, что сделал @softbear - просто import файл javascript внутри вашего проекта.Вы можете сделать это различными способами в зависимости от ваших настроек.Его пример состоит из 

<script src="images.js"></script>

, который экспортирует что-то вроде 

window.images = [{ 'array of images': 'goes here'}]

. Если вы используете Vue, вы сможете использовать загрузочный проект и просто импортировать его из своегонапрямую исходные файлы.

У вас может быть серверная часть, которая дает тот же результат, и браузер автоматически загрузит его при импорте сценария.

Существует множество способов, но результат один и тот же.Здесь самое важное, что этот файл должен declare ваша переменная, которая будет использоваться позже.

С подходом сверху мало проблем: у вас нет полного контроля над тем, когданачать загрузку данных, ни когда данные загружены (есть способы сделать это, но сложнее и довольно некрасиво);некоторые междоменные сервисы не позволяют вам выполнять код js напрямую - они могут предоставлять только данные.

Это означает, что если вы окажетесь в такой ситуации (например, при подключении к динамическому набору данных, а не в жестко заданном коде)1) всегда лучше сделать запрос на загрузку этих данных.В основном, вручную делать то, что браузер может сделать для вас.Но таким образом у вас есть полный (и простой) контроль над тем, когда и как это делается.

Опять же, существует множество способов - если вы используете последнюю версию JS в современном браузере, вы можете использовать fetchAPI или используйте некоторые внешние инструменты, такие как axios .

Я бы проголосовал за второй подход, несмотря на то, что он может добавить еще одну зависимость к вашему проекту.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...