【问题标题】：Vue.js conditionalsVue.js 条件
【发布时间】：2017-10-17 20:50:29
【问题描述】：

我有一个由其他人用 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;
    }

},

【问题讨论】：

不清楚您的代码与您的问题有何关联。确切地说，您想在什么时候将 ident 设置为 true ？ document.getElementById('conceptDiv')il. 语法错误是怎么回事？
哪个变量告诉我们显示了多少个链接？您是否需要向您的组件传递一个额外的道具，也许？
id="concept-{{ concept.uri }}" 必须是 v-bind:id="'concept-'+ concept.uri" 并且您可以使用 ref 而不是 id 来寻址 vue 元素内的元素。请制作小提琴或类似的东西来描述您的问题。

标签： javascript vue.js

【解决方案1】：

让我们将所有链接保存在一个数组中，比如 links[]，在您的 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: [],  
      }
}

【讨论】：