using vuejs to append all the items in an array into a div using v-for?-CodePudding

I have a vuejs method that appends data on a screen. My issue is, I want to append all of the items found in the array to the screen using v-for instead of just one that is filtered by an index?

new Vue({
  el: "#app",
  data: () => ({
    chocs:[{"title":'a man tale'}, {"title":'a boy tale'},{"title":'a mermaid tale'},{"title":'a dog tale'}]  
  }),
  methods: {
    handleTileClick: function(){

      $("#fox").append(`<div id="popover-dialog">data here: ${this.chocs.title}</div>`
      );
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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-for="choc in chocs"></div>
</div>

CodePudding user response：

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

Live 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;
    },
  },
};

CodePudding user response：

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>