[Vuejs]-Appending data to an already loaded page in vue (Facebook posts and comment)

by

0👍

What you describe is a toggle. It corresponds to a boolean data item: true is on (comments displayed) false if off (comments not displayed). The method attached to the button switches the value of the boolean. A v-if directive controls the display of comments, based on the boolean.

I’ve stripped your example down to just the relevant code.

new Vue({
  el: '#app',
  data: {
    comments: 'This is comments',
    commentsVisible: false
  },
  methods: {
    toggleComments() {
      this.commentsVisible = !this.commentsVisible;
    }
  }
});
<script src="//unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  <h2> Posts</h2>
  <span>
    <template v-if="commentsVisible">{{comments}}</template>
    <button @click='toggleComments'>Comment</button>
  </span>
</div>
👤Roy J

Leave a comment