Question

我正在学习VueJS。这段代码虽然不漂亮，但几乎可以正常工作。我的问题是，尽管每个API中只有一个项目（0），但API在两个单独的v-for循环中具有标题和href。我希望能够将标题放在<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>

Answer 1

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

<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>

但是，如注释中所述，使用computed property可以使您的回答更加简洁。

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

1 个答案: