vue2 反应过滤器值？

Question

我无法在虚拟机数据更新时更新我计算的过滤器值。就我而言，我有一些时间日期时间存储在 UTC 的 VM 模型中。然后我有一个过滤器，它显示那些使用 moment 格式化为时区的时间。然后，如果用户需要，我想切换时区，但是当他们切换时区时，过滤器值不会相应更新。我是否遗漏了让他们反应的东西？此外，它甚至没有使用我的默认值 selectedTz: 'America\Los_Angeles'（你会注意到它开始时一直显示为 TZ +0 (UTC)，尽管有此默认设置）。

var app = new Vue({
        el: '#app',
        data: {
            games: [{start_time: '2017-01-23 21:00:00'}, {start_time: '2017-01-23 22:00:00'}, {start_time: '2017-01-23 23:00:00'}],
            selectedTz: 'America/Los_Angeles'
        },
        methods: {
            switchToEast: function () {
                this.selectedTz = 'America/New_York'
            },
            switchToWest: function () {
                this.selectedTz = 'America/Los_Angeles'
            }
        },
        filters: {
            usertz: function (date) {
                var tz = this.selectedTz
                var x = new moment.tz(date, 'Etc/UTC')
                x.tz(tz)
                return x.format('MMM Do @ h:mm a Z')
            }
        }
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.11/moment-timezone-with-data.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>
<div id="app">
    <p class="text-right">All times are in {{ selectedTz }}</p>
    <div class="text-right">
        <button class="button" @click="switchToEast()">East</button>
        <button class="button" @click="switchToWest()">West</button>
    </div>
    <p v-for="game in games">
        {{ game.start_time | usertz }}
    </p>
</div>

Answer 1

我也遇到过这样的过滤器问题。无法用过滤器解决它，决定用计算属性来解决。在我看来，过滤器不能处理太多的计算。文档本身说

filters are primarily designed for text transformation purposes

像我这样尝试，应该可以。

var app = new Vue({
        el: '#app',
        data: {
            games: [{start_time: '2017-01-23 21:00:00'}, {start_time: '2017-01-23 22:00:00'}, {start_time: '2017-01-23 23:00:00'}],
            selectedTz: 'America/Los_Angeles'
        },
        methods: {
            switchToEast: function () {
                Vue.set(this, 'selectedTz', 'America/New_York')
            },
            switchToWest: function () {
                Vue.set(this, 'selectedTz', 'America/Los_Angeles')
            }
        },
        computed: {
            filteredGames: function () {
                var filteredList = []
                for (i = 0; i < this.games.length; i++) { 
                    var x = new moment.tz(this.games[i].start_time, 'Etc/UTC')
                    x.tz(this.selectedTz)
                    filteredList.push({start_time: x.format('MMM Do @ h:mm a Z')})
                }
                return filteredList
            }
        }
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.11/moment-timezone-with-data.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>
<div id="app">
    <p class="text-right">All times are in {{ selectedTz }}</p>
    <div class="text-right">
        <button class="button" @click="switchToEast()">East</button>
        <button class="button" @click="switchToWest()">West</button>
    </div>
    <p v-for="game in filteredGames">
        {{ game.start_time }}
    </p>
</div>

Answer 2

虽然被标记为正确的答案运行...它委托给计算机属性作业来转换日期和格式以供演示。虽然格式应该是过滤器的工作。

根据所选属性更改时区，实际上是计算的工作属性。但是您可以让计算的属性将所有日期转换为 Moment.js 对象，并仅使用过滤器来格式化日期的呈现...这就是过滤器的确切工作。

var app = new Vue({
    el: '#app',
    data: {
        games: [{start_time: '2017-01-23 21:00:00'}, {start_time: '2017-01-23 22:00:00'}, {start_time: '2017-01-23 23:00:00'}],
        selectedTz: 'America/Los_Angeles'
    },
    methods: {
        switchToEast: function () {
            Vue.set(this, 'selectedTz', 'America/New_York')
        },
        switchToWest: function () {
            Vue.set(this, 'selectedTz', 'America/Los_Angeles')
        }
    },
    computed: {
        filteredGames: function () {
            var filteredList = []
            for (var game of this.games) {
                var start_time = new moment.tz(game.start_time, 'Etc/UTC')
                start_time.tz(this.selectedTz)

                game.start_time = start_time
                filteredList.push(game)
            }

            return filteredList
        }
    },
    filters: {
        datetime: function(date) {
            return date.format('MMM Do @ h:mm a Z')
        }
    }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.11/moment-timezone-with-data.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>
<div id="app">
    <p class="text-right">All times are in {{ selectedTz }}</p>
    <div class="text-right">
        <button class="button" @click="switchToEast()">East</button>
        <button class="button" @click="switchToWest()">West</button>
    </div>
    <p v-for="game in filteredGames">
        {{ game.start_time | datetime }}
    </p>
</div>

Answer 3

过滤器可以采用额外的参数。如果将所有反应变量从函数体移动到参数，它应该可以工作。例如：

<template>
  {{ message | filter(data) }}
</template>

<script>
  export default {
    filters: {
      filter(message, data) {
        return `Message: ${message}, Data: ${data}`;
      },
    },

    data() {
      return {
        data: "Try changing me!",
      };
    },

    props: {
      message: String,
    },
  };
</script>

或者在你的例子中：

var app = new Vue({
        el: '#app',
        data: {
            games: [{start_time: '2017-01-23 21:00:00'}, {start_time: '2017-01-23 22:00:00'}, {start_time: '2017-01-23 23:00:00'}],
            selectedTz: 'America/Los_Angeles'
        },
        methods: {
            switchToEast: function () {
                this.selectedTz = 'America/New_York'
            },
            switchToWest: function () {
                this.selectedTz = 'America/Los_Angeles'
            }
        },
        filters: {
            usertz: function (date, tz) {
                var x = new moment.tz(date, 'Etc/UTC')
                x.tz(tz)
                return x.format('MMM Do @ h:mm a Z')
            }
        }
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.11/moment-timezone-with-data.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>
<div id="app">
    <p class="text-right">All times are in {{ selectedTz }}</p>
    <div class="text-right">
        <button class="button" @click="switchToEast()">East</button>
        <button class="button" @click="switchToWest()">West</button>
    </div>
    <p v-for="game in games">
        {{ game.start_time | usertz(selectedTz) }}
    </p>
</div>

vue2 反应过滤器值？

vue2 reactive filter values?

javascript

datetime

momentjs

vuejs2