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

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

使用这个回购协议进行实验，我只是想复制一个基本的“产品列表”和“产品描述”应用程序，但我无法让它工作。回购协议的主页（SearchPage.vue组件）充当“产品列表”，我只是想添加“产品描述”组件，一次只显示一个项目

我添加了一个“描述页面”组件（称之为“item.vue”），允许用户单击其中一种语言/框架，然后将其路由到item.vue，以仅显示特定对象的关联信息（item.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 :to="'/item/'+item.id"> {{ item.name}} </router-link>

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

---

非常感谢您的帮助。

您访问

id

的唯一原因是因为它是一个url参数：

/item/：id

这里有几个选项，这取决于您要完成的任务：

---

正如@dziraf所建议的，您可以使用

vuex

创建一个商店，这样您就可以访问应用程序中任意一点的所有数据：

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

在此处了解更多信息：

---

或者，您可以导入数据，并通过其

id

获取正确的项目：

import data from './data.js';

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

---

这取决于您要做什么。

我想您只需要一个包装器组件，它从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>

现在我们需要修改

SearchPage.vue

，让堆栈框充当链接。而不是：

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

因此，现在每个组件都被放置在一个链接中，该链接指向

item/name

瞧

一些考虑：

• ：param

  是vue路由器工作的关键。您希望使用它来渲染

  ItemCard

  本身。这可能可行，但您需要从组件

  created（）

  的数据中检索fw。这会将您的卡组件与

  data.js

  绑定在一起，这是不好的，因为这样的组件意味着可以重用，在这种情况下，获取

  项

  参数比从文件中获取数据要好得多。因此，创建了一个

  ItemWrapper

  ，用于代理请求并为卡选择正确的框架

• 您仍然应该检查用户键入错误字符串时的情况

• 在使用vuex解决方案之前，请深入了解Vue。Vuex很好，但通常会导致脆弱的代码，不应过度使用

---

如果您希望您的对象可用于其他组件，请考虑使用存储区：您将将对象保存在存储区中，并且可以通过组件中的计算属性访问它。但是，我确实有一个问题，我似乎无法解决，并将感谢任何帮助。由于新路径是

path:'/item/:stackNameUrl'，

我想用

-

s替换URL中的空白并转换成小写，但我不知道在哪里/如何转换。我已尝试添加

.replace（/\s+/g，'-'）.toLowerCase（）到了很多地方，但没有达到我想要的结果。有什么建议吗？直接在回购协议中填写PR以避免在评论中讨论：-）再次感谢。我非常感谢你在这方面花时间和清晰。
<!-- 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>