时间戳

首页 > 解决方案 > 基本 Vue 帮助：访问组件中的 JS 对象值

javascript - 基本 Vue 帮助：访问组件中的 JS 对象值

问题描述

我一直在尝试使用 vue.js，并且在路由时难以访问组件中的 JS 对象值。

使用这个 repo 进行实验，https://github.com/johnayeni/filter-app-vue-js，我只是想复制一个基本的“产品列表”和“产品描述”应用程序，但我不能让它工作。存储库的主页（SearchPage.vue 组件）用作“产品列表”，我只是尝试添加“产品描述”组件以一次仅显示一项。

我添加了一个“描述页面”组件（称为“item.vue”），以允许用户单击其中一种语言/框架，然后将其路由到 item.vue 以仅显示该特定对象的关联信息（项目.name、item.logo 等），即不显示任何其他语言。

在一些教程之后，这是我尝试过的：

首先，我向 JS 对象（在 data/data.js 中找到）添加了 id，即id:'1'。

const data = [
 {
    id: '1',
    name: 'vue js',
    logo: 'http://... .png',
    stack: [ 'framework', 'frontend', 'web', 'mobile' ],
 },
 {
    id: '2',
    name: 'react js',
    logo: 'http://... .png',
    stack: [ 'framework', 'frontend', 'web', 'mobile' ]
 },
...
];
export default data

然后，我将 item.name（在 ItemCard.vue 中）包装在 router-link 标签中：

<router-link :to="'/item/'+item.id"> {{ item.name}} </router-link>

然后我在 router/index.js 中添加了一个新路径：

{
path: './item/:id', 
component: item,
props: true
}

但是，当单击该路由器链接时，我只能访问“.id”（通过 $route.params.id），但无法获取 .name 或 .logo。如何访问其他值（即 item.name、item.logo 等）？我有一种感觉，我在这里走错了路。

非常感谢你的帮助。

标签： javascriptvue.jsvuejs2vue-componentvue-router

解决方案

您可以访问的唯一原因是id因为它是一个 url 参数：./item/:id。

您在这里有几个选择，这取决于您要完成的工作：

正如@dziraf 所建议的那样，您可以使用它vuex来创建一个商店，这反过来又可以让您访问应用程序中任何时候的所有数据：

export default {
  computed: {
    data() {
      return this.$store.data;
    }
  }
}

在此处了解更多信息：https ://vuex.vuejs.org/

作为替代方案，您可以只导入数据，并通过其获取正确的项目id：

import data from './data.js';

export default {
  computed: {
    data() {
      return data.find(d => d.id === this.$route.params.id);
    }
  }
}

只取决于你想要做什么。

推荐阅读