Question

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

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

更改对所选属性作出反应的时区，实际上是计算属性的作用。但您可以让计算属性将所有日期转换为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 2

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

过滤器主要用于文本转换目的

像我这样试试它应该有用。

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 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无功滤波器值？

3 个答案: