Question

我正在使用Vue.js以及它附带的常用设置（vue-router等）。我遇到问题，使用一个全局数据集（站点上所有项目的JSON输出），在查看该视图时返回单个项目的数据。我很困惑我哪里出错了？

我的母版页有这么简单的输出：

<div id="app">
    <router-view></router-view>
</div>

app.js：

import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import router from './routes.js';

const app = new Vue({

    router: router,
    data: data
}).$mount('#app');

我的routes.js文件包含以下内容：

import VueRouter from 'vue-router';

var routes = [

    {
        path: '/', 
        component: require('./views/Projects.vue')
    },
    {
        name: 'project', 
        path: '/:id', 
        component: require('./views/Project.vue') 
    }

]

export default new VueRouter({
    routes: routes
});

我有两个.vue组件;项目和项目。

Projects.vue如下所示，似乎工作正常：

<template>
    <ul>
        <li v-for="project in projects">
            {{ project.title }} 
            <router-link :to="{ name: 'project', params: { id: project.id }}">View Details</router-link>
        </li>
    </ul>
</template>

<script>
module.exports = {
  data: function () {
    return data
   }
}
</script>

但是，Project.vue无效。

<template>
  <div>
    <h1>{{ project.title }}</h1>
    <router-link to="/">Homepage</router-link>
  </div>
</template>

<script>
module.exports = {
  data: function () {
    var project;
    for (var i = 0; i < data.length; i++) {
      if (data[i].id == this.$route.params.id) {
        project = data[i];
        break;
      }
    }

    return {
      project: project
    }
   }
}
</script>

我的JSON数据只是在页脚包含文件中设置。

var data = {"projects":[{"id":1080,"title":"Hopton Yard","name":"hopton-yard","size":null,"img":{"featured":"\/Sites\/hat-projects-vuejs\/site\/assets\/files\/1080\/hat_projects_hoptonyard_exterior-001-1.jpg"}},{"id":1082,"title":"Science Museum Entrances &amp; Supporters\u2019 Centre","name":"science-museum-entrances-supporters-centre","size":null,"img":{"featured":"\/Sites\/hat-projects-vuejs\/site\/assets\/files\/1082\/hat_projects_science_museum.jpg"}},{"id":1084,"title":"Upper &amp; Lower Fosters","name":"upper-lower-fosters","size":null,"img":{"featured":"\/Sites\/hat-projects-vuejs\/site\/assets\/files\/1084\/hat_projects_upper_lower_fosters.jpg"}},{"id":1086,"title":"Jerwood Gallery","name":"jerwood-gallery","size":null,"img":{"featured":"\/Sites\/hat-projects-vuejs\/site\/assets\/files\/1086\/hat_projects_jerwood.jpg"}},{"id":1101,"title":"High House Artists\u2019 Studios","name":"high-house-artists-studios","size":null,"img":{"featured":"\/Sites\/hat-projects-vuejs\/site\/assets\/files\/1101\/hat_projects_high_house_artists_studios.jpg"}},{"id":1115,"title":"Stoke Barn","name":"stoke-barn","size":null,"img":{"featured":"\/Sites\/hat-projects-vuejs\/site\/assets\/files\/1115\/hat_projects_stoke_barn.jpg"}}]}

Answer 1

除了一个小错误之外，你的代码会起作用。您的全局对象data不是您要迭代的对象。您希望迭代data.projects。

var project;
for (var i = 0; i < data.projects.length; i++) {
  if (data.projects[i].id == this.$route.params.id) {
    project = data.projects[i];
    break;
  }
}

使用一个数据集时的Vue-router组件

1 个答案: