Vuejs с массивами

#javascript #vue.js #vue-resource

#javascript #vue.js #vue-ресурс

Вопрос:

Я преобразую ответ JSON в массив со следующим:

         json_data = response.body.movies;
        var result = [];
        for(var i in json_data) result.push([i, json_data [i]]);
        self.movies = _.chunk(result, 3);
  

Прежде чем я попытаюсь преобразовать его, это объект, выглядящий следующим образом:

введите описание изображения здесь

После преобразования:

введите описание изображения здесь

Я должен преобразовать, потому что метод Lodash chunk работает только с массивами (?).

Итак, при запуске _.chunk(JSONAPIREPSONSE,4) , self.movies выглядит так:

введите описание изображения здесь

Пока что слишком хорошо.

Но когда я пытаюсь v-for self.movies , я не могу получить нужную мне информацию. У меня есть этот шаблон

            <div class="row" v-for="(movie, index) in movies" v-bind:index="index">
                <div class="col-sm-4" v-for="(set, key) in movie" v-bind:key="key">
                    <div class="panel">
                        <div class="panel-heading">
                            <a v-on:click.prevent="fetchNow(movie.movie_title)" :href="movie.movie_id">@{{ set.movie_title }}</a>
                        </div>
                        <div class="panel-body">
                        movie title: <b>@{{ set.movie_title }}</b> <br>
                        set: <b>@{{ set }}</b> <br>
                              //Here comes Content do whatever here
                        </div>
                    </div>
            </div>
  

И результат для {{ set.movie_title }} пуст, без ошибок.

Результатом для {{ set }} является:

 [ "0", { "movie_title": "Bridget Jones's", "movie_id": "17523" } ] 
[ "1", { "movie_title": "Strange", "movie_id": "17483" } ]
  

Ожидаемый результат

Обычный синтаксис vuejs для отображения содержимого массива.

Комментарии:

1. Было бы полезно, если бы вы могли включить больше вашего компонента Vue (например, методы, данные и место, где выполняется _.chunk вызов). Кроме того, какова структура movies объекта перед его преобразованием? И какая это версия Vue — 1.x или 2.x?

2. @PatrickSteele Я попытался обновить свой ответ. Метод просто извлекает данные из запроса AJAX и заполняется как первое изображение, показанное в моем обновленном ответе. _.cunk это метод из Lodash. Его vue 2.1

Ответ №1:

попробуйте получить к нему доступ таким образом {{ set[1].movie_title }}

и вы можете использовать _.chunk без преобразования ответа json в array и получить доступ к результату следующим образом {{ set.movie_title }}