仅在一个项目中添加/删除类以进行循环(VUE)

发布于 2025-02-11 09:14:19 字数 3192 浏览 1 评论 0原文

我想一次在一个循环中一次从一个项目中添加和删除一类。我有一堆动态加载的项目,一旦单击其中一个,该项目就应该具有类。单击另一个项目时,应从上一个项目中删除类,并添加到刚刚单击的项目中。

这是我当前拥有的代码。我可以看到TimesLot.selected已按照应有的更新进行更新,但是孩子的组件:类完全没有对道具更改做出反应。

availabletimeslots.vue

<template>
    <div>
        <timeslot
            v-for="timeslot in timeslots"
            :key="timeslot.id"
            :timeslot="timeslot"
            @pickedTimeslot="pickTime(timeslot)"
        ></timeslot>
    </div>
</template>

<script>
    import Timeslot from './Timeslot.vue';

    export default {
        name: 'AvailableTimeslots',
        components: { Timeslot },
        data() {
            return {
                timeslots: []
            };
        },
        mounted() {
            this.getTimeslots();
        },
        methods: {
            pickTime(timeslot) {
                this.deselectTimeslots(timeslot.id);
            },
            async getTimeslots() {
                // Gets timeslots (not relevant)

                this.deselectAllTimeslots();
            },
            deselectAllTimeslots() {
                this.timeslots.forEach(timeslot => {
                    timeslot.selected = false;
                });
            },
            deselectTimeslots(id) {
                this.timeslots.forEach(timeslot => {
                    if (timeslot.id !== id) timeslot.selected = false;
                    else timeslot.selected = true;
                });
            },
        }
    }
</script>

timeslot.vue

<template>
    <div 
        class="card"
        :class="{ 'selected-timeslot': this.timeslot.selected }"
        @click="pickTime()"
    >
        {{ timeslot.from }}
    </div>
</template>

<script>
    export default {
        name: 'Timeslot',
        props: [ 'timeslot' ],
        methods: {
            pickTime() {
                this.$emit('pickedTimeslot', this.timeslot);
            },
        },
    }
</script>

我也尝试复制从timeslot.septer.septer.seled.chepter.septer.seled。 ,没有任何更新(即使我检查Vue DevTools,Timeslot实际上确实更新了)。

timeslot.vue

<template>
    <div 
        class="card"
        :class="{ 'selected-timeslot': this.isSelected }"
        @click="pickTime()"
    >
        {{ timeslot.from }}
    </div>
</template>

<script>
    export default {
        name: 'Timeslot',
        props: [ 'timeslot' ],
        data() {
            return {
                isSelected: this.timeslot.selected,
            };
        },
        methods: {
            pickTime() {
                this.$emit('pickedTimeslot', this.timeslot);
            },
        },
        watch: {
            timeslot: {
                handler() {
                    this.$nextTick(() => {
                        this.isSelected = this.timeslot.selected;
                    });
                },
                immediate: true,
                deep: true,
            },
        },
    }
</script>

有人知道为什么孩子组件在道具的更新中没有反应?甚至更好 - 我可以简单地解决这个问题吗?

I would like to add and remove a class from only one item at a time in a for loop. I have a bunch of dynamically loaded items, and once one of them is clicked, that item should have the class. When another item is clicked, the class should be removed from the previous item and added to the item that was just clicked.

This is the code I currently have. I can see that timeslot.selected is updated as it should, but the child component's :class is not reacting to the prop change at all.

AvailableTimeslots.vue

<template>
    <div>
        <timeslot
            v-for="timeslot in timeslots"
            :key="timeslot.id"
            :timeslot="timeslot"
            @pickedTimeslot="pickTime(timeslot)"
        ></timeslot>
    </div>
</template>

<script>
    import Timeslot from './Timeslot.vue';

    export default {
        name: 'AvailableTimeslots',
        components: { Timeslot },
        data() {
            return {
                timeslots: []
            };
        },
        mounted() {
            this.getTimeslots();
        },
        methods: {
            pickTime(timeslot) {
                this.deselectTimeslots(timeslot.id);
            },
            async getTimeslots() {
                // Gets timeslots (not relevant)

                this.deselectAllTimeslots();
            },
            deselectAllTimeslots() {
                this.timeslots.forEach(timeslot => {
                    timeslot.selected = false;
                });
            },
            deselectTimeslots(id) {
                this.timeslots.forEach(timeslot => {
                    if (timeslot.id !== id) timeslot.selected = false;
                    else timeslot.selected = true;
                });
            },
        }
    }
</script>

Timeslot.vue

<template>
    <div 
        class="card"
        :class="{ 'selected-timeslot': this.timeslot.selected }"
        @click="pickTime()"
    >
        {{ timeslot.from }}
    </div>
</template>

<script>
    export default {
        name: 'Timeslot',
        props: [ 'timeslot' ],
        methods: {
            pickTime() {
                this.$emit('pickedTimeslot', this.timeslot);
            },
        },
    }
</script>

I have also tried copying over the value from timeslot.selected to a data attribute, but the same goes as before - when I watch the timeslot prop, nothing updates (even though the timeslot does in fact update if I check Vue DevTools).

Timeslot.vue

<template>
    <div 
        class="card"
        :class="{ 'selected-timeslot': this.isSelected }"
        @click="pickTime()"
    >
        {{ timeslot.from }}
    </div>
</template>

<script>
    export default {
        name: 'Timeslot',
        props: [ 'timeslot' ],
        data() {
            return {
                isSelected: this.timeslot.selected,
            };
        },
        methods: {
            pickTime() {
                this.$emit('pickedTimeslot', this.timeslot);
            },
        },
        watch: {
            timeslot: {
                handler() {
                    this.$nextTick(() => {
                        this.isSelected = this.timeslot.selected;
                    });
                },
                immediate: true,
                deep: true,
            },
        },
    }
</script>

Anyone got any idea why the child component doesn't react on updates to the prop? Or even better - can I solve this in a simpler way?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文