Javascript Vue.js-使用筛选器更新父数据

我是Vue.js的初学者，我想在组件中的ajax完成后更新父数据。问题是当我使用filter

moment

时，没有filter一切都很好，但我需要这个filter。第一次渲染没有问题，因为列

resolved\u date

为空。但在调用ajax并将数据从组件发送到父级之后，我想更新父级数据（

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)

到目前为止，我已经：

编辑：这里有同样的错误

<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>

{{difference.sn}}
{{difference.resolved_date？（difference.resolved_date|矩）：null}
{{difference.source}}
{{difference.pair.source}
修理
Vue.filter（'时刻'），函数（日期）{
返回时刻（日期）。格式（'DD.MM.YYYY HH:MM:ss'）；
});
新Vue({
el:'集装箱'，
数据：{
存储：{
差异：[
{sn:111，解析日期：null，源：'EK'，对：{source:'VLT'}，
{sn:222，解析日期：null，源：'EK'，对：{source:'VLT'}
]
},
},
安装的（）{
此.$root.$on（'updateEvent'，函数（数据，索引）{
this.storage.differences[index]。已解决日期=数据；
console.log（this.storage.differences[index].resolved\u date）；
})
},
组成部分：{
维修电话：{
模板：“#修复btn”，
道具：['diff'，'index']，
方法：{
可修复性差异：函数（）{
此.diff.load=真；
这是.$http.post（'/path.file.php'{
ids：这个.diff.id
}).然后（功能（响应）{
此.root.emit（'updateEvent'，'2016-01-01 00:00:00'，此.index.）；
}).catch（函数（错误）{
console.log（error.data）；
});
}
}
},
},
});

---

如何使用筛选器更新数据而不出现任何错误？

您可能应该将筛选器的定义移动到

Vue

构造函数中

---

过滤器在这种情况下不起作用，因为您希望在三元表达式中使用它们。（当前，您将按位与未设置的

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>

{{difference.resolved_date？时刻（difference.resolved_date）：null}

---

这是更新后的JSBin:

我已经尝试过了，没有结果，还是一样。您可以在这里检查它，显然您需要将该定义放入

数据
对象中
<td rowspan="2">{{difference.resolved_date ? moment(difference.resolved_date) : null }}</td>