vue.js - 在 vue.js 中的 v-for 循环中检索 id

Question

我有一个对象数组，称为“文章”，来自 API 调用，我正在使用 v-for 循环来显示它们。

现在，当用户点击其中一篇文章时，我想检索 ID，以便我可以使用它来 $router.push 查询字符串。

问题是，由于文章是一个数组，我需要正确的索引来检索 ID。如何实现这一目标？

这是示例 HTML:

        <article  v-for="(article, index) in articles" v-
        on:click="displayArticle" :index="index">
            <h4>{{ article.title }}</h4>
            <p>{{ article.text }}</p>
        </article>

这是一个示例 vue.js 代码

export default {
data () {
    return {
        articles: []
    }
},
// here I avec a create() that make an API call and push the json in articles.

methods : {
    displayArticle: function() {
    // I don't know ho to retrieve the index 

    // The router part would be something like this
    this.$router.push({ path: '/app/?article_id=', query : {article_id: articleId}}
    }
}

我尝试使用 ref 但我只是得到另一个数组。

谢谢你的帮助

Answer 1

v-on:click="displayArticle(index)" - 只需将索引传递给您的函数。

如果每篇文章的 ID 不等于数组中的位置(我假设不是)，那么您应该将每篇文章的 ID 包含在服务器发送的数据中(连同 article.title、article.text应该是 article.id)。