Vue.js - 親データをフィルタで更新する

Question

私はVue.jsで初心者です。コンポーネントのajaxが終了した後、親データを更新したいと思います。問題は、私はフィルタmomentを使用すると、フィルタがすべてうまくいないが、私はこのフィルタが必要です。列resolved_dateが空であるため、最初のレンダリングは問題ありません。しかし、アヤックスが呼び出されると、データがコンポーネントから親に放出された後、私は（resolved_date）親データを更新したいが、私はエラーが発生します。

vue.js:2611 [Vue warn]: Property or method "moment" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in root instance) 

は、これまでのところ私が持っている：

編集：こちらこれはありますJS Bin exampleと同じエラーが発生しました。

<div id="container"> 
    <table border="1"> 
     <template v-for="(difference, index) in storage.differences"> 
      <tr> 
       <td rowspan="2" is="repair-btn" :diff="difference" :index="index"></td> 
       <td rowspan="2">{{ difference.sn }}</td> 
       <td rowspan="2">{{ difference.resolved_date ? (difference.resolved_date | moment) : null }}</td> 
       <td>{{ difference.source }}</td> 
      </tr> 
      <tr> 
       <td>{{ difference.pair.source }}</td> 
      </tr> 
     </template> 
    </table> 
</div> 

<template id="repair-btn"> 
    <td> 
     <button @click="repairDifference">fix</button> 
    </td> 
</template> 

<script> 
    Vue.filter('moment', function (date) { 
     return moment(date).format('DD.MM.YYYY HH:mm:ss'); 
    }); 

    new Vue({ 
     el: '#container', 

     data: { 
      storage: { 
       differences: [ 
        {sn: 111, resolved_date: null, source: 'EK', pair: {source: 'VLT'}}, 
        {sn: 222, resolved_date: null, source: 'EK', pair: {source: 'VLT'}} 
       ] 
      }, 
     }, 

     mounted() { 
      this.$root.$on('updateEvent', function (data, index) { 
       this.storage.differences[index].resolved_date = data; 
       console.log(this.storage.differences[index].resolved_date); 
      }) 
     }, 

     components: { 
      repairBtn: { 
       template: '#repair-btn', 
       props: ['diff', 'index'], 

       methods: { 
        repairDifference: function() { 
         this.diff.loading = true; 
         this.$http.post('/path.file.php', { 
          ids: this.diff.id 
         }).then(function (response) { 
          this.$root.$emit('updateEvent', '2016-01-01 00:00:00', this.index); 
         }).catch(function (error) { 
          console.log(error.data); 
         }); 
        } 
       } 
      }, 
     }, 
    }); 
</script> 

エラーを発生させることなくフィルタを使用してデータを更新するにはどうすればよいですか？

Answer 1

フィルタは、このケースでは動作しませんし、フィルタの定義を移動する必要があります。 （。。現在、あなたが設定されていないthis.moment、とのビット単位の|比較をするよあなたは警告を得る理由です）

あなたは、単に代わりの方法を使用することができます。

methods: { 
    moment (date) { 
    return moment(date).format('DD.MM.YYYY HH:mm:ss'); 
    } 
} 

をし、それを呼び出します

<td rowspan="2">{{difference.resolved_date ? moment(difference.resolved_date) : null }}</td> 

とここで更新JSBinです：https://jsbin.com/zifugidogu/edit?html,js,console,output

Answer 2

おそらくあなたはVue「コンストラクタ」あなたは三式でそれらを使用したいので

data: { 
    ... 
    filters: { 
     'moment', function (date) { 
      return moment(date).format('DD.MM.YYYY HH:mm:ss'); 
     } 
    } 
}