在 v-for div 之间传递数据 - vue.js答案

【问题标题】：Passing data between v-for divs - vue.js在 v-for div 之间传递数据 - vue.js
【发布时间】：2018-11-28 23:16:50
【问题描述】：

我正在学习 VueJS。这段代码并不漂亮，但它的工作方式几乎就像它应该做的那样。我的问题是 API 在两个单独的 v-for 循环中具有标题和 href，尽管每个循环中只有一项 (0)。我希望能够将标题放在<img> alt 标记中，并且我还想将图像包装在包含另一个变量的<a> 标记中。我不相信我可以在{{ }} 中声明变量。有没有另一种方法可以制作一个可以在每个v-for 之外使用的临时变量？或者，这是解决这个问题的坏方法吗？

app.js...

const app = new Vue({
    el: '#app',
    data: {
        results : []
    },
    methods: {
        getItems: function () {
            if (this.txtInput && this.mediaType) {
                axios.get("https://www.api.org/search?q="+this.txtInput+"&media_type="+this.mediaType)
                    .then(response  => this.results = response.data);
                this.mediaType = null;
            }
        }
    }
});

然后，我的 HTML 有这个...

            <div id="app">
                <input id="txtName" v-on:keyup.enter="getItems" v-model="txtInput" type="text"><br>
                <input type="radio" id="image" value="image" v-model="mediaType">
                <label for="image">Image</label>
                <br>
                <input type="radio" id="audio" value="audio" v-model="mediaType">
                <label for="audio">Audio</label>
                <div v-for="result in results">
                        <div v-for="item in result.items">
                            <div v-for="data in item.data">
                                @{{ data.title }}<br>
                            </div>
                            <div v-for="link in item.links">
                                <img v-bind:src="link.href">
                            </div>
                        </div>
                </div>
            </div>

【问题讨论】：

我认为您必须转换响应数据以在每个项目的每个链接中包含 title 属性。
好的，谢谢。我该怎么做？
@sdexp 通过写代码
如果您向我们展示您的 axios 响应数据是什么样的，我们或许可以提供帮助。

标签： javascript vue.js axios

【解决方案1】：

如果result.items 中的索引data 和links 属于一个元素。
例如。 result.items.data[0].title 是 result.items.links[0].href 的标题。
然后你可以去在 v-for 中声明一个索引：

<div v-for="item in result.items">
  <div v-for="(data, index) in item.data">
    @{{ data.title }}<br>
    <img v-bind:src="item.links[index].href">
  </div>
</div>

但是，如 cmets 中所述，使用computed property 转换您的响应是一种更简洁的方法。

【讨论】：