[英]Vuejs: method with v-if not working
I think this might be a typo somewhere, but can't find the issue. 我认为这可能是某个地方的错字,但找不到问题。 I have this Vuejs template, that renders just fine if I remove the v-if verification. 我有这个Vuejs模板,如果我删除v-if验证,该模板就很好了。 However when I use it, it does not render anything at all. 但是,当我使用它时,它根本不会渲染任何东西。 Already placed a debugger both in return true, and return false, and the logic test returns true only once, as expected. 已经按预期将调试器同时返回true和false,并且逻辑测试仅返回true一次。 Can anybody spot what am I doing wrong? 有人可以发现我在做什么错吗?
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;
},
...
Update: For anyone who is having the same problem, I ended up using a computed property, rather than a method itself. 更新:对于遇到相同问题的任何人,我最终使用的是计算属性,而不是方法本身。 The v-if/-v-show behaviour to show/hide elements was moved to the computed property. 用于显示/隐藏元素的v-if / -v-show行为已移至计算属性。 In the end I was not sure if this was an issue with Vuejs. 最后,我不确定这是否是Vuejs的问题。 Here is the working code: 这是工作代码:
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
}
}
}
...
Change from v-if
to v-show
从v-if
更改为v-show
v-show="mostraApenasPerfilEspecificado(perfil, tipo)"
You can also use template
to use v-if
outside child component as 您还可以使用template
将v-if
外部子组件用作
template: `
<div class="workbench container">
<ul class="collapsible popout" data-collapsible="expandable">
<template v-for="(tipo, index) in tiposCollapsibles">
<collapsible-cards
v-if="mostraApenasPerfilEspecificado(perfil, tipo)"
v-bind:key="index"
v-bind:dados="tipo">
</collapsible-cards>
</template>
</ul>
</div>`,
If not work, share live demo 如果不行,请分享现场演示
There appears to be a similar bug in Bootstrap-Vue, where v-if
only works on non-Bootstrap elements. Bootstrap-Vue中似乎有一个类似的错误,其中v-if
仅适用于非Bootstrap元素。
With otherwise identical code, this element will not appear when this.error = true
: 使用其他相同的代码,当this.error = true
时,此元素将不会出现:
<b-alert v-if="error" variant="danger">Failed!</b-alert>
But this will: 但这将:
<div v-if="error">Failed!</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.