javascript - vue2 react 过滤器值？

Question

当虚拟机数据更新时，我无法更新我计算的过滤器值。就我而言，我有一些时间日期时间存储在 UTC 的 VM 模型中。然后我有一个过滤器，它显示那些使用 moment 格式化为时区的时间。然后，如果用户需要，我想切换时区，但是当他们切换时区时，过滤器值不会相应更新。我是否遗漏了让他们 react 的东西？此外，它甚至没有使用我的默认值 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>