Vue.js

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

也许你应该将过滤器的定义移动到 Vue "constructor"

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

Answer 2

过滤器在这种情况下不起作用，因为您想在三元表达式中使用它们。（目前，您将与未设置的 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

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

Vue.js - update parent data with filter

javascript

ajax

vue-component