vue.jsサンプル

component.coffee

$ ->
  TalkTree.setupComponents = ->
    Vue.component('article-row', {props: ['article', 'selected_article_id', 'joined'], template: '#article_row'})
    if $('.js-component-group').length == 0
      return

    if ('.js-component-group').length > 0
      TalkTree.componentGroup = new Vue(
        el: '.js-component-group'
        data:
          group_id: 0
          joined: true
          is_loading: true
          has_loading: true
          selected_article_id: 0
          not_ok_articles: []
          ok_articles: []
        methods:
          clickGroup: (groupId) ->
            this.group_id = groupId
            this.is_loading = true
            this.has_loading = true
            this.selected_article_id = 0
            this.not_ok_articles = []
            this.ok_articles = []
          removeArticle: (articleId) ->
            for article in this.not_ok_articles
              if article.id == articleId
                this.not_ok_articles.$remove(article)
                break
            for article in this.ok_articles
              if article.id == articleId
                this.ok_articles.$remove(article)
                break
          updateArticle: (updateArticle) ->
            articleId = updateArticle.id
            for article, index in this.not_ok_articles
              if article.id == articleId
                this.not_ok_articles.$set(index, updateArticle)
                break
            for article, index in this.ok_articles
              if article.id == articleId
                this.ok_articles.$set(index, updateArticle)
                break
          readArticle: (articleId) ->
            for article, index in this.not_ok_articles
              if article.id == articleId
                article.is_unread = false
                article.has_unread = false
                this.not_ok_articles.$set(index, article)
                break
            for article, index in this.ok_articles
              if article.id == articleId
                article.is_unread = false
                article.has_unread = false
                this.ok_articles.$set(index, article)
                break
      )

index.haml

= content_for :group_menu do
  %li.nav-item.dropdown.header-menu-group.js-header-menu-group

= content_for :right_column do
  .article-tree-container.js-article-tree-container.js-right-container
  = link_to '#', class: 'article-tree-container__back js-article-back' do
    = fa_icon 'chevron-circle-left'

.articles-container.js-articles-container.js-hash-routing.js-left-container
  .js-article-form

  .js-component-group
    .js-not-ok-articles
      <article-row v-for="article in not_ok_articles" :article="article" :selected_article_id="selected_article_id" :joined="joined" />

    .ok-articles.js-ok-articles{'v-bind:class' => "{ 'is-empty': ok_articles.length == 0, 'is-joined': joined }"}
      <article-row v-for="article in ok_articles" :article="article" :selected_article_id="selected_article_id" :joined="joined"/>

    .articles__loading.js-articles-loading{'v-bind:class' => "{ 'is-loading': is_loading }", 'v-if' => "has_loading", data: {url: "/groups/{{ group_id }}/articles.js"}}
      = image_tag 'loading.gif', width: 40, height: 40