Vue 基础帮助：访问组件中的 JS 对象值

Question

我一直在试验 vue.js，但在路由时我很难访问组件中的 JS 对象值。

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

我已经添加了一个 "description page" 组件（称之为 "item.vue"）以允许用户点击其中一个 languages/frameworks 然后路由到 item.vue仅显示该特定对象的关联信息（item.name、item.logo 等），即不显示任何其他语言。

按照一些教程，这是我尝试过的方法：

首先，我将 id 添加到 JS 对象（在 data/data.js 中找到），即 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
}

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

非常感谢您的帮助。

Answer 1

您可以访问 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);
    }
  }
}

这取决于你想做什么。

Answer 2

我想您只需要一个包装器组件，它从 URL 中获取所需的项目并呈现正确的项目。假设一个 ItemWrapper：

<template>
  <item-card :item="item"></item-card>
</template>

<script>
import ItemCard from './ItemCard.vue';
import data from '../data/data';

export default {
  components: {
    ItemCard,
  },
  props: {
    stackNameUrl: {
      required: true,
      type: String,
    },
  },
  data() {
    return {
      item: {},
    }
  },
  computed: {
    stackName() {
      return decodeURI(this.stackNameUrl);
    }

  },
  created() {
    this.item = data.find( fw => fw.name === this.stackName);
  }
}
</script>

<style>

</style>

此组件采用 stack/fw 名称 uri 编码的 prop，对其进行解码，根据此类字符串从数据中找到 fw，并使用 fw 项呈现 ItemCard。

为此，我们需要设置路由器 /item/vue js f.i。使用 'vue js' 作为 stackNameUrl 属性渲染 ItemWrapper。为此，重要的一点是将 props 设置为 true:

import Vue from 'vue';
import Router from 'vue-router';
import SearchPage from '@/components/SearchPage';
import ItemWrapper from '@/components/ItemWrapper';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'SearchPage',
      component: SearchPage
    },
    {
      path: '/item/:stackNameUrl',
      name: 'ItemWrapper',
      component: ItemWrapper,
      props: true,
    },
  ]
});

现在我们需要修改SearchPage.vue，让堆叠框作为link。而不是：

<!-- iterate data -->
      <item-card v-for="(item, index) in filteredData" :key="index" :item="item"></item-card>

我们现在放置：

<template v-for="(item, index) in filteredData" >
  <router-link :to="'/item/' + item.name" :key="index">
    <item-card  :key="index" :item="item"></item-card>
  </router-link>
</template>

所以现在每个组件都放在 link 到 item/name 之间。

瞧瞧。

一些注意事项：

:param 是 vue 路由器工作的关键。你想用它来渲染 ItemCard 本身。这可行，但您需要从组件 created() 的数据中检索固件。这将你的卡片组件与 data.js 联系在一起，这是不好的，因为这样的组件意味着可重用，并且在这种情况下采用 item 参数比从文件中获取数据要好得多。因此创建了一个 ItemWrapper 来代理请求并为卡片选择正确的框架。
您仍应检查用户键入错误字符串的情况。
在使用 vuex 解决方案之前深入探索 Vue。 Vuex 很棒，但通常会导致代码脆弱，不应过度使用。

Vue 基础帮助：访问组件中的 JS 对象值

Basic Vue help: Accessing JS object values in component

javascript

vue.js

vue-router

vue-component

vuejs2