1つのデータセットを使用する場合のVue-routerコンポーネント

Question

私はVue.jsとそれに付随する通常の設定（vue-routerなど）を使用しています。 1つのグローバルデータセット（サイト上のすべてのプロジェクトの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 
}); 

私は2つを持っている

私のマスターページには、この単純な出力を持っています.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 & 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 & 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; 
    } 
}