Dynamic page creation, display, hide elements on click or condition

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!!