Question

我是Vue.js的初学者，我想在组件中的ajax完成后更新父数据。问题是当我使用过滤器moment时，没有过滤器就可以了，但是我需要这个过滤器。第一次渲染没有问题，因为列resolved_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)

到目前为止，我有：

编辑：这是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＆＃34;构造函数＆＃34;

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

Vue.js - 使用过滤器更新父数据

2 个答案: