Hello, I am new to Vue js(3), what are the essential properties to use in a component to show or hide elements. for example: Show a list from an array in the data, hide a list. What are the essential instructions? Thanks for your help. I also went through the documentation.
You can use v-show of v-if to hide and show elements.
You can check the docs for details info.
1 Like
Thank your for your answers.
Please, I have a problem with my code. I’ts possible to visualize it.
I allow myself, I posted a other message, have you ever encountered this kind of error ? Vue v-on:click does not work on component with axios
It’s my post.
Hi @Webystud
I created a working example for displaying and hiding elements on click or condition.
Check out this link: display-hide-elements - CodeSandbox
1 Like
Thank you for your answer.
1 Like
This is exactly the example I was looking for.
1 Like
But I have a litle problem.
Below my loop I want to put a condition, if for example an item is greater than one , I want a button to display all articles if it is less than 1 , the article will be displayed.
I don’t understand how can I do this.
Hi @Webystud
Nice to hear that my solution is useful to you and I also worked on your problem you have mentioned that if an item is greater than one, you want a button to display all articles and if it is less than one, the single article will be displayed. So for that you can use v-if="articles.length > 1" condition in your button.
Checkout below code:
<template>
<div id="app">
<h3>Display Hide Elements Demo</h3>
<button
v-for="b in buttons"
:key="b"
@click="show = b"
class="btn m-4 btn-primary"
>
{{ b }}
</button>
<div class="container">
<div class="row">
<div
v-show="show === d.id"
:key="d.id"
v-for="d in divs"
class="col-sm-3 m-2"
>
{{ d.name }}
</div>
</div>
</div>
<hr />
<div class="container articles">
<h3>Article Demo</h3>
<div class="row">
<div v-for="article in articles" :key="article.id">
{{ article.name }}
</div>
</div>
<button v-if="articles.length > 1">Show</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
buttons: [1, 2, 3],
divs: [
{ id: 1, name: "one" },
{ id: 2, name: "two" },
{ id: 3, name: "three" },
],
articles: [
{ id: 1, name: "first article" },
// { id: 2, name: "second article" },
// { id: 3, name: "third article" },
],
show: null,
};
},
};
</script>
Try to uncomment the data of the articles to see the proper output.
For a working example click on this link: display-hide-elements/article-condition - CodeSandbox
I hope this works!!
1 Like
Thank you very much.
I will try to introduce your logic according to my template. It’s work very well.
The button is displayed only if a post has more than 1 comment. But this button will have to have the action of displaying the hidden comments according to the condition. I block.Should we use the v-show property which must be true in the view data?
<div v-for="comment of post.Comments" :key="comment.idcomment">
<Comment :comment="comment" />
</div>
<div class="p-2">
<button v-if="post.Comments.length > 1">Show</button>
</div>
</div>```
1 Like
Hi @Webystud
Check out this source code with a live demo link: display-hide-elements/article-condition - CodeSandbox
Hope this works!!
Thank you very much for your return, it does not work, it makes a duplicate at the level of my loop. I will review the code and logic.
I get the articles (with their “_id”) in this same loop I get another comments loop. When I follow the logic of your code, nothing happens. The structure of my code is a div inside a loop with the articles then another loop to retrieve the comments.
I do not understand why.The button does not engage when I do:
<div>
<div :id="article._id" class="hide">
<div v-for="comment of article.Comments" :key="comment.idcomment">
<CommentCompo :comment="comment" />
</div>
</div>
</div>
<div>
<button
v-if="article.Comments.length > 1"
@click="displayComment(article._id)"
>
show
</button>
</div>Hey @Webystud
Now I have created an example same as you want. The structure of the code is a div inside a loop with the articles then another loop to retrieve the comments.
<template>
<div id="app">
<div class="container articles">
<h3>Article Demo</h3>
<div class="row">
<div v-for="article in articles" :key="article.id">
<p>{{ article.name }}</p>
<button v-if="articles.length > 1" @click="toggleComment(article.id)">
Show
</button>
<div
v-for="comment in article.comments"
:id="comment.commentId"
:key="comment.commentId"
class="hide"
>
<ul>
<li v-for="c in comment.commentsData" :key="c">
{{ c }}
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
articles: [
{
id: 1,
name: "first article",
comments: [
{
commentId: 1,
commentsData: ["comments1"],
},
],
},
{
id: 2,
name: "second article",
comments: [
{
commentId: 2,
commentsData: ["comments1", "comment2", "comment3"],
},
],
},
{
id: 3,
name: "third article",
comments: [
{
commentId: 3,
commentsData: ["comments1", "comment2", "comment3", "comment4"],
},
],
},
],
show: null,
};
},
methods: {
toggleComment(id) {
const test = document.getElementById(id);
console.log("checking the element", test);
if (test.classList.contains("hide")) {
document.getElementById(id).classList.remove("hide");
} else {
document.getElementById(id).classList.add("hide");
}
},
},
};
</script>
<style scoped>
.articles {
margin-top: 30px;
}
.hide {
display: none;
}
</style>
Check out this source code with a live demo link: display-hide-elements/article-condition - CodeSandbox
I hope this works!!