Question

我是vue.js的新手，正在尝试使用vuex。这是我的问题：

我有一个列表（是组件），这些列表通过v-for="article in articles和计算出的属性与商店链接：

computed: {
        articles() {
            return this.$store.state.articles
        }
    }

这是我商店中的数据：

 state: {
    articles: [{
        title: "Article 1",
        id: 1,
        description: "Article 1",
      }, {
        title: "Article 2",
        id: 2,
        description: "Article 2",
      }
     }]
}

单击文章时，我希望它使用<router-link :to="{path: '/article/'+article.id}"></router-link>重定向到文章页面模板（它是组件）。

我想做的是在articlePage模板中绑定正确文章的数据。

问题在于，如果我将具有articlePage.vue的相同计算属性应用于我的v-for组件，则将所有文章显示在同一页面上。我只想显示匹配的id组件。

我该怎么做？

谢谢您的时间：）

Answer 1

根据您的评论，我了解到您使用的是 vue-router 模块因此，在您的routes.js（或结构）中，您必须具有类似的内容

const router = new VueRouter({
   routes: [
    { path: '/articles', component: articlesPage },
    { path: '/article/:id', component: articlePage }
  ]
})

然后在articlePage组件中，您可以像这样提取“：id”：

this.$route.params.id

因为vue-router使您可以使用方法和属性访问对象$route 在https://router.vuejs.org/guide/essentials/dynamic-matching.html

处查看更多

然后您可以使用它来搜索articles数组并找到数据并显示它们

computed:{
   selectedArticle(){
     var article_id = this.$route.params.id;
     var articles = this.$store.state.articles;
     var article = null;
     for(var a=0;a<articles.length;a++){
         if(articles[a].id == article_id ){
           article = articles[a];
           break;
         }
     } 
     return article;
   }
}

使用Vuex将数据绑定到组件

1 个答案: