带数组的 Vuejs

Question

我正在将 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语法来显示数组的内容。

Answer 1

尝试像这样访问它{{ set[1].movie_title }}

并且您可以使用 _.chunk 而无需将 json 响应转换为数组并访问结果 {{ set.movie_title }}

带数组的 Vuejs

Vuejs with arrays

javascript

vue.js

vue-resource

在我尝试转换之前，它是一个对象，看起来像这样：

转换后：

预期结果