如何使用JSON动态更改组件的内容？

Question

bounty到期在4天内。这个问题的答案有资格获得+ 50声望赏金。Austin Branham希望对此问题引起更多关注：“请帮助我解决这个问题！”

我正在使用Vue CLI 3创建我的设计作品集。我的网站的架构非常简单。我有一个主页，关于页面，工作页面和几个单独的项目页面：

• 首页
  • 关于
  • 工作
    • 项目
    • 项目
    • 项目

工作页面由几个链接组成，这些链接将单击进入各个项目页面。 工作组件的设置如下：

<template>
  <div>
    <projectLink v-for="data in projectLinkJson" />
  </div>
</template>

<script>
import projectLink from '@/components/projectLink.vue'
import json from '@/json/projectLink.json'

export default {
  name: 'work',
  data(){
    return{
      projectLinkJson: json
    }
  },
  components: {
    projectLink
  }
}
</script>

如您所见，我正在导入JSON以动态呈现内容。 接下来，在下面的代码块中可以看到projectLink组件。在此组件中，我正在将参数传递到名为<router-link>的projectName中>

<template>
  <router-link :to="{ name: 'projectDetails', params: { name: projectName }}">
      <h1>{{ title }}</h1>
  </router-link>
</template>

<script>
export default {
  name: 'projectLink',
  props: {
    title: String,
    projectName: String
  }
}
</script>
我的routes.js文件的设置如下：

const routes = [
   { path: '/', component: home },
   { path: '/about', component: about },
   { path: '/work', component: work },
   {
     path: "/work/:name",
     name: "projectDetails",
     props: true,
     component: projectDetails
   },
];
而且我的JSON就像这样：

  {
    "0": {
      "title": "test",
      "projectName": "test"
    }
  }
最后，我的projectDetails组件是我遇到此问题的组件：

<template>
    <div>
      <div
        v-for="(data,index) in projectDetailsJson" v-if="index <= 1">
            <h1>{{ data.title }}</h1>
            <p>{{ data.description }}</p>
      </div>
    </div>
</template>

<script>
import json from '@/json/projectDetails.json'

export default {
  name: 'projectDetails',
  data(){
    return{
      projectDetailsJson: json
    }
  },
  props: {
    description: String,
    title: String
  }
}
</script>
我已成功路由到所需的URL，即/ project /'name'。我想将projectDetails组件用作每个单独项目页面的框架。但是如何动态地执行此操作？我想从JSON文件中检索数据，并根据传递给URL的名称从数组中显示正确的对象。我不想进行迭代，并在页面上显示所有数组。我只想显示一个项目。

我正在使用Vue CLI 3创建我的设计作品集。我的网站的架构非常简单。我有一个主页，关于页面，工作页面和几个单独的项目页面：Home About Work ...

Answer 1

到目前为止，奥斯丁做得很好！您的工作非常接近。您可以通过几种不同的方法将JSON文件中的正确数据解析为projectDetails组件，但是我将演示我的首选方法。

Answer 2

如果我理解正确，您想保留一个父组件作为您所有页面的布局吗？