我有一个项目,其前端由其他人用vue.js编写。当组件加载时,当需要多个链接时,我需要添加一个条件来显示链接。如果我的某些术语不正确,我很抱歉,我之前没有使用vue.js或类似的经验,而且我对javascript的知识有限。非常感谢任何指导。
这是我到目前为止所尝试的。我迷路的地方是如何在页面加载时触发它。
var ConceptListItem = {
props: ['concept'],
template: `<div class="list-group-item concept-item clearfix" id="concept-{{ concept.uri }}">
<div id="conceptDiv">
<a v-if="ident" v-on:click="select" style="cursor: pointer;">{{ concept.label }} ({{ concept.authority.name }}) {{ concept.identities[0].concepts[0] }}</a>
<a v-else v-on:click="select" style="cursor: pointer;">{{ concept.label }} ({{ concept.authority.name }})</a>
</div>
<div class="text text-muted">{{ concept.description }}</div>
</div>`,
data: function() {
return {
ident: false,
}
},
methods: {
select: function() {
this.$emit('selectconcept', this.concept);
},
}
}
然后我尝试添加一个在vue模板中创建的函数
created () {
window.addEventListener('scroll', this.handleScroll);
window.addEventListener('resize', this.handleScroll);
var self = this;
document.getElementById('graphContainer').onmouseup = function() {
self.updateSwimRef();
self.handleScroll();
},
document.getElementById('conceptDiv')il. = function() {
self.ident = true;
}
},
答案 0 :(得分:2)
让我们将所有链接保存到数组中,如链接[],在html中添加以下代码
<div v-if="links.length>1">
// your code with condition
</div>
<div v-else>
// else part if any
</div>
在vue部分,您需要按以下方式添加数组,
data: function () {
return {
links: [],
}
}