开发者问题收集

vueJs 中 Set 的大小

2021-08-05
377

我有一组,我想在 VueJS 中获取该集合的大小,然后我将使用它进行页面导航。我的问题是我无法使用 size 来查找对象的大小。

export default {
    data() {
        return {
            numberOfPages: this.weeks.size,
            weeks: new Set(),
            tickets: [
                {
                    id: 0,
                    time: "09:45",
                    date: new Date(),
                    name: "Swimming in the hillside pond",
                },
                {
                    id: 1,
                    time: "09:45",
                    date: new Date(),
                    name: "Swimming in the hillside pond",
                },
            ],
        };
    },
    methods: {
        currentNumberOfWeek(tickets) {
            tickets.forEach(ticket => {
                let result = this.getWeekNumber(ticket.date);
                this.weeks.add(result)
            });
            this.sortSet(this.weeks);
            console.log(this.weeks);
        },
        getWeekNumber(date) {
            const oneJan = new Date(date.getFullYear(), 0, 1);
            const numberOfDays = Math.floor((date - oneJan) / (24 * 60 * 60 * 1000));
            let weekNumber = Math.ceil((date.getDay() + 1 + numberOfDays) / 7);
            return weekNumber;
        },
        sortSet(set) {
            const entries = [];
            for (const member of set) {
                entries.push(member);
            }
            set.clear();
            for (const entry of entries.sort()) {
                set.add(entry);
            }
            return set;
        },
    },
};

我收到“TypeError:无法读取未定义的属性‘size’”并且我不知道为什么会收到它。

2个回答

我认为处理此问题的最佳方法是使用计算属性。

var app = new Vue({ 
    el: '#app',
    data: {
        message: 'Hello Vue!',
        weeks: new Set()
    },
    computed: {
        weeksSize(){
            return this.weeks.size
        }
    }
});

然后,您也可以在方法中使用“this.weeksSize”来使用“weeksSize”。

查看 文档 以获取有关计算属性的更多信息。

MarcelCode
2021-08-05

在这种情况下,您需要一个计算属性。

{
  data(){return {weeks: new Set()}},
  computed:{numberOfPages:()=>this.weeks.size}
}

https://v3.vuejs.org/guide/computed.html#computed-properties

DropMania
2021-08-05