Reputation: 1253
I have a project with a front-end written in vue.js by someone else. I need to add a conditional to display links when more than one link is present when the component loads. I apologize if some of my terminology is not correct, I have no prior experience with vue.js or anything similar and my knowledgable of JavaScript is limited.
This is what I have tried so far. Where I get lost is how to trigger it on page load.
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);
},
}
}
I have then tried adding a function to created in the vue template
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;
}
},
Upvotes: 0
Views: 196
Reputation: 23
Lets keep all your links into an array say links[], add the following code in your html
<div v-if="links.length>1">
// your code with condition
</div>
<div v-else>
// else part if any
</div>
In vue part you need to add the array in the following way,
data: function () {
return {
links: [],
}
}
Upvotes: 2