Vue Comments Example

app.js

// CommentBox component
Vue.component('comment-box', {
  template: '#comment-box',

  props: ['comments'],

  events: {
   'signal:addComment': function(comment) {
      this.comments.push(comment);
    }
  }
});

// CommentItem component
Vue.component('comment-item', {
  template: '#comment-item',

  props: ['comment']
});

// CommentList component
Vue.component('comment-list', {
  template: '#comment-list',

  props: ['comments'],

  data: function() {
    return {
      sortKey: undefined,
      reverse: 1,
      columns: ['user', 'body', 'rating']
    }
  },

  methods: {
    sortByKey: function(key) {
      this.reverse = this.reverse * -1;
      this.sortKey = key;
    }
  }
});

// CommentForm component
Vue.component('comment-form', {
  template: '#comment-form',

  data: function() {
    return {
      user: undefined,
      body: undefined,
      rating: 0
    }
  },

   methods: {
     addComment: function() {
       // Validate form
       if(!this.body.trim() || !this.user.trim()) return;

       var comment = { user: this.user, body: this.body, rating: this.rating }

       // Dispatch an event, it propagates upward along the parent chai
       this.$dispatch('signal:addComment', comment);
       this.clearForm();
     },

     clearForm: function() {
       this.body = undefined;
       this.user = undefined;
       this.rating = 0;
     }
   }
});

// Create Vue Instance
window.vue_root = new Vue({
  el: 'body',

  data: {
    title: 'Vue.js Comments',

    commentNodes: [
      { user: 'Alex', body: 'Hello, World', rating: 10 },
      { user: 'Matz', body: 'Use Ruby!', rating: 7 },
      { user: 'DHH', body: 'Rails is the best', rating: 5 }
    ]
  }
})

1

test

asfdsafds

asfdsafds

jbbj

The GitHub Gist provides a practical space for sharing technical information and code that can help developers work through project-related tasks.

Working with technical projects often involves choosing the right tools and equipment for specific needs, whether the task is digital or hands-on.

For Ford Raptor owners researching practical truck accessories, more info is available from N-Fab.