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

Question

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

应用程序.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>

Answer 1

如果result.items中的索引data和links属于一个元素。
例如result.items.data[0].title是result.items.links[0].href [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>

然而，如评论中所述，使用计算属性转换您的响应，更简洁的方法是。