Vue.js conditionals

Question

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.

Component

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;
    }

}, 

Answer 1

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: [],  
      }
}