【发布时间】：2017-11-27 10:43:32
【问题描述】：
我认为这可能是某个地方的错字，但找不到问题。我有这个 Vuejs 模板，如果我删除 v-if 验证，它就可以很好地呈现。但是，当我使用它时，它根本不会渲染任何东西。已经在 return true 和 return false 中放置了一个调试器，并且逻辑测试只返回一次 true，正如预期的那样。谁能发现我做错了什么？
template: `
<div class="workbench container">
<ul class="collapsible popout" data-collapsible="expandable">
<collapsible-cards
v-for="tipo, index in tiposCollapsibles"
v-if="mostraApenasPerfilEspecificado(perfil, tipo)"
v-bind:key=index
v-bind:dados="tipo"
>
</collapsible-cards>
</ul>
</div>`,
mounted: function() {
for (key in this.tiposCollapsibles) {
if (this.tiposCollapsibles[key].perfisQuePodemVer.indexOf(this.perfil) >= 0) {
this.queryTeleconsultorias(key);
}
}
},
methods: {
mostraApenasPerfilEspecificado(perfil, tipo) {
tipo['perfisQuePodemVer'].forEach(function(value) {
if (perfil === value) {
return true;
}
});
return false;
},
...
更新：对于遇到同样问题的任何人，我最终都使用了计算属性，而不是方法本身。显示/隐藏元素的 v-if/-v-show 行为已移至计算属性。最后我不确定这是否是 Vuejs 的问题。这是工作代码：
template: `
<div class="workbench container">
<ul class="collapsible popout" data-collapsible="expandable">
<collapsible-cards
v-if="showTipoCollapsibles[index]"
v-for="tipo, index in tiposCollapsibles"
v-bind:key="index"
v-bind:object="tipo"
>
</collapsible-cards>
</ul>
</div>`,
mounted: function() {
this.executeQuery(this.perfil);
},
computed: {
showTipoCollapsibles: function() {
let perfisVisiveis = {};
for (tipo in this.tiposCollapsibles) {
perfisVisiveis[tipo] = this.tiposCollapsibles[tipo].enabledForProfiles.includes(this.perfil);
}
return perfisVisiveis;
},
},
methods: {
executeQuery: function(value) {
if (value === 'monitor') {
var query = gql`query {
entrada(user: "${this.user}") {
id
chamadaOriginal {
datahoraAbertura
solicitante {
usuario {
nome
}
}
}
...
【问题讨论】：
-
检查错字
v-bind:key=index，应该是v-bind:key="index"
标签： javascript vuejs2