1
我使用vue制作单个页面，我希望每个网格项目的v-link路径不同。vue-v-link v-for使用数据
现在是这样的：
<div v-link="'/detail/' + 'work'" class="itemImg">
我想是这样的：
<div v-link="'/detail/' + data.title " class="itemImg">
V型link`s data.title无法找到，但data.title在V-其他步伐很好。
她是我的代码
var png = ".png"
var jpg = ".jpg"
var HtmlFormat = ".html"
// WORK
var db = new loki('workDB.json');
var workCol = db.addCollection('workCol');
var workNames = ["x50", "glmg", "ring", "iwatch", "moto", "edge", "i8", "nike", "shave", "house"];
var workWebglFolder = "assets/webgl/";
var workHtmlFolder = "pages/work/";
var workImgFolder = "img/workImg/";
var workImgkUrls = [];
var workHtmlUrls = [];
var workTitles = [];
var workSummary = [];
$.each(workNames, function(index, title) {
var workWebglUrl = workWebglFolder + title;
var workHtmlUrl = workHtmlFolder + title + HtmlFormat;
var workimgkUrl = workImgFolder + title + png;
var workOBJ = {};
workOBJ.id = index;
workOBJ.useClass = title;
workOBJ.title = title;
workOBJ.link3d = workWebglUrl;
workOBJ.link = workHtmlUrl;
workOBJ.image = workimgkUrl;
workCol.insert(workOBJ);
var useClass = "." + title;
workHtmlUrls.push(workHtmlUrl);
workImgkUrls.push(workimgkUrl);
$.ajax({
url: workHtmlUrl,
async: false,
success: function(data) {
title = $(data).filter('title').text();
summary = $(data).filter(useClass).text();
workOBJ.title = title;
workOBJ.summary = summary;
}
});
})
// BLOG
var db = new loki('blogDB.json');
var blogCol = db.addCollection('blogCol');
var blogNames = ["waveLoader", "playcanvas-introduce", "lokiJS", ];
var blogHtmlFolder = "pages/blog/";
var blogImgFolder = "img/blogImg/";
var blogImgkUrls = [];
var blogHtmlUrls = [];
var blogTitles = [];
var blogSummary = [];
$.each(blogNames, function(index, title) {
var blogHtmlUrl = blogHtmlFolder + title + HtmlFormat;
var blogimgkUrl = blogImgFolder + title + jpg;
BJ.useClass = title;
blogOBJ.title = title;
blogOBJ.link = blogHtmlUrl;
blogOBJ.image = blogimgkUrl;
blogCol.insert(blogOBJ);
var useClass = "." + title;
blogHtmlUrls.push(blogHtmlUrl);
blogImgkUrls.push(blogimgkUrl);
$.ajax({
url: blogHtmlUrl,
async: false,
success: function(data) {
title = $(data).filter('title').text();
summary = $(data).find('.summary').text().substring(0,200) + "...";
blogOBJ.title = title;
blogOBJ.summary = summary;
}
});
})
// db.saveDatabase(function() {
// console.log("save db")
// });
var workdv = workCol.addDynamicView('workCol_view');
workdv.applyWhere(function customFilter(obj){
return obj.id > -1;
});
workdv.applySimpleSort('id')
var blogdv = blogCol.addDynamicView('blogCol_view');
blogdv.applyWhere(function customFilter(obj){
return obj.id > -1;
});
blogdv.applySimpleSort('id')
//USE VUE GET LOKIJS DATA
var lookVue = new Vue({
el: '.pages',
data: {
work: workdv.data(),
blog: blogdv.data()
},
});
console.log(lookVue.work[0].title)
var notFound = Vue.extend({
template: '<h1>Not Found</h1>' +
'<router-view></router-view>'
})
var workComponent = Vue.extend({
template:
'<h1>Work</h1>' +
'<router-view></router-view>'
})
var blogComponent = Vue.extend({
template:
'<h1>Blog</h1>' +
'<router-view></router-view>'
})
var aboutComponent = Vue.extend({
template:
'<h1> aboutComponent </h1>' +
'<a v-link="{ path: \'/subroute\' }" class="btn btn-lg btn-primary" role="button">View SubRoute</a>' +
'<router-view></router-view>'
})
var contactComponent = Vue.extend({
template:
'<h1> 联系 </h1>' +
'<router-view></router-view>'
})
var detail = Vue.extend({
template:
'<h1>Navbar example</h1>' +
'<p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>' +
'<p>To see the difference between static and fixed top navbars, just scroll.</p>'
})
Vue.config.debug = true;
Vue.use(VueRouter)
var router = new VueRouter({
history: false,
hashbang:true,
// saveScrollPosition:true,
root: '/'
})
Vue.component('newtemp', {
template: '#workVUE',
route: {
data: function(transition) {
transition.next({
// saving the id which is passed in url to $data
itemName: transition.to.params.itemName
});
}
},
data: function() {
return {
itemName:itemName,
}
},
})
router.map({
// '*': {
// component: notFound
// },
'/': {
component: workComponent,
subRoutes: {
'/detail': {
component: detail
}
}
},
'/work': {
component: workComponent,
subRoutes: {
'/detail': {
component: detail
}
}
},
'/blog': {
component: blogComponent,
subRoutes: {
'/detail': {
component: detail
}
}
},
'/about': {
component: aboutComponent,
subRoutes: {
'/detail': {
component: detail
}
}
},
'/contact': {
component: contactComponent
},
'/detail/:itemName': {
name: 'detail', // 给这条路径加上一个名字
component: Vue.component('newtemp')
},
});
var App = Vue.extend()
router.start(App, 'body')<template v-for="data in work" id="workVUE">
<div class="item scrollItem">
<div v-link="'/detail/' + 'work'" class="itemImg">
<div class="gridImg workImg">
<img v-bind:src="data.image" />
</div>
</div>
<div class="itemTitle">
<h3>{{data.title}}</h3>
</div>
<div class="itemTag">
<div class="tagTitle">
<ul class="tagName">
<li class="tagTip"><h3> 标签: </h3> </li>
<li><h3 class="pageName"> {{data.useClass}} </h3> </li>
<li><h3> {{data.tag}} </h3> </li>
</ul>
<div class="titlePos"> <h3>titlePos</h3> </div>
</div>
</div>
<ul class="info">
<li class="infoItem infoTitle">
<h3>{{data.title}}</h3>
</li>
<li class="infoItem infoCont">
<h3>{{data.date}}</h3>
<h3>作者：laishi</h3>
</li>
</ul>
<ul class="bar">
<li class="barItem barMark">
<div> <i class="fa fa-bookmark" aria-hidden="true"></i> </div>
</li>
<li class="barItem">
<dir> <a class="moreLink" v-bind:href="data.link3d"> <h3> 3D </h3> </a> </dir>
</li>
<li class="barItem barInfo">
<div>
<i class="fa fa-info"></i>
</div>
</li>
</ul>
</div>{{ }}
</template>由于缺少路由的知识，结果往往是不一样的，因为我觉得，所以请大家帮忙。 PLZ修复我的代码，感谢+++
你试过'DIV V-LINK =“ '/细节/' + { {data.title}}“class =”itemImg“>'或用单引号？ – samayo
是的，我尝试，不工作，谢谢，{{data.title}}不能在v链接中使用 –
v-link =“'/ detail /'+ {{data.title}}”//像这样非常合理，但VUE不知道该怎么办 –