[Vuejs]-Using vuejs to append all the items in an array into a div using v-for?

by

0👍

✅

Check the below code

var app = new Vue({
 el: '#app',
 name: "App",
 data: () => ({
    showList: false,
    chocs: [
      { title: "a man tale" },
      { title: "a boy tale" },
      { title: "a mermaid tale" },
      { title: "a dog tale" },
    ],
  }),
 methods: {
    handleTileClick: function () {
      this.showList = true;
    },
  },
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h2>Todos:</h2>
  <button v-on:click="handleTileClick">Click Me</button>
  <div id="fox" v-if="showList">
   <div id="list-item" v-for="(choc, index) in chocs" :key="index">{{ choc.title }}</div>
  </div>
</div>

0👍

You can first hide the elements and show them after click on the click Me button:

Live Demo

Codesandbox Demo

<div id="fox" v-if="isShowing">
  <div id="popover-dialog" v-for="choc in chocs" :key="choc.title">
    data here: {{ choc.title }}
  </div>
</div>

data and methods as:

export default {
  name: "App",
  data: () => ({
    isShowing: false,
    chocs: [
      { title: "a man tale" },
      { title: "a boy tale" },
      { title: "a mermaid tale" },
      { title: "a dog tale" },
    ],
  }),
  methods: {
    handleTileClick: function () {
      this.isShowing = true;
    },
  },
};

Leave a comment