我有一个项目的前端用vue js写的由别人。当组件加载时存在多个链接时，我需要添加一个条件来显示链接。我很抱歉，如果我的某些术语不正确，我以前没有vue js或类似的任何经验，并且我对javascript的知识有限。任何指导非常感谢。Vue js条件

组件

这是我迄今为止尝试过的。我迷路的地方是如何在页面加载时触发它。

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

},

来源

2017-10-17 Taylor

您的代码如何与您的问题相关尚不清楚。什么时候，你是否想要将'ident'设置为'true'？那么'document.getElementById（'conceptDiv'）il.'语法错误呢？ – Botje

哪个变量告诉我们显示了多少链接？你是否需要传递一个额外的道具给你的组件，也许？ – admcfajn

'id =“concept - {{concept.uri}}”''必须是'v-bind：id =''concept - '+ concept.uri''，您可以使用'ref'在vue元素内部寻找元素而不是id。请用小提琴或类似物来描述你的问题。 – Reiner

让我们保持所有的链接到一个数组说链接[]，在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: [], 
     } 
}

来源

2017-11-03 10:00:32

Vue js条件

组件

回答

相关问题