Vue.js 處理Rails data的filter-view

.erb

<%# view fragment %>
<% @topic_categories.each do |category| %>
<li role="presentation"><a v-on:click="one('<%= category.meta_key %>')" aria-controls="<%= category.meta_key %>" role="tab" data-toggle="tab"><%= category.send('name_'+ get_locale) %></a></li>
<% end %>

<tbody id="topics">
  <tr v-for="topic in topics">
      <td>{{ topic | locale }}</td>
      <td>{{ topic.created_at | moment }}</td>
      <td>{{ topic.title_zh }}</td>
      <td>
        <span>留言數:{{ topic.topic_messages_count }}</span>
        <a href="/white_paper_classification_detail" class="button1 firstcolor small">我要留言</a>
      </td>
  </tr>
</tbody>

<%# view fragment end %>
===========================================================
<script type="text/javascript">
var topic_data = <%= sanitize @topics.to_json %>;
var topics = new Vue({
  el: '#topics',
  filters: {
    moment: function () {
      return moment().format('YYYY/MM/DD');
    },
    locale: function (self) {
      return self.name_<%= get_locale %> ;
    }
  },
  data: {
    topics: topic_data
  }
})

var categories = new Vue({
  el: '#categories',
  methods: {
    all: function (event) {
      topics.topics = topic_data
    },
    one: function (event){
      console.log(event)
      topics.topics = topic_data.filter(function (topic) {
       return topic.meta_key == event;
      })
    }
  }
})

</script>