为什么选中复选框显示，而我已经检查了上一页的复选框？

Question

我正在使用带有尾风CSS的高山js，下面出现了一个不确定的bug，这是一个复选框选择问题。实际上，有多种选择类型的问题，当我选择一个或多个复选框并移动到下一个问题时，在下一个问题的复选框中显示所选的复选框与我在上一个问题中选择的相同，直到我选择其中任何一个之后，它已经显示了当前的选择。下面是代码片段

-‘= () => {返回{ me: this，type: null，节：[]，currentSection：{}，选择：[]，currentIndex: 0，currentStep：'start'，userValidator：{ isValid: true，submitUser() {

            this.userValidator.isValid = !Object.values(this.userValidator.user).some(
                (field) => !field.isValid
            );
            console.log('over here', this.userValidator.isValid);
            if (!this.userValidator.isValid) {
                return this.userValidator.isValid;
            }
            console.log(this.submission.user);
            this.currentStep = 'sections';                
        },
        validationCallback(field) {
            let { value, rules } = field;
            let isValid = iodine.isValid(value, rules);
            let errorMsg = isValid
                ? null
                : iodine.getErrorMessage(iodine.is(value, rules));
            return { isValid, errorMsg };
        },            
        user: {
            name: {
                rules: ["required"],
                validate(validator, submitted) {
                    let { isValid, errorMsg } = validator.validationCallback({...this, value: submitted.user.name});
                    this.isValid = isValid;
                    this.errorMsg = errorMsg;
                },
                isValid: null,
                errorMsg: null
            },
            email: {
                value: null,
                rules: ["required", "email"],
                validate(validator, submitted) {
                    let { isValid, errorMsg } = validator.validationCallback({...this, value: submitted.user.email});
                    this.isValid = isValid;
                    this.errorMsg = errorMsg;
                },
                isValid: null,
                errorMsg: null
            },
            company: {
                value: null,
                rules: ["required"],
                validate(validator, submitted) {
                    let { isValid, errorMsg } = validator.validationCallback({...this, value: submitted.user.company});
                    this.isValid = isValid;
                    this.errorMsg = errorMsg;
                },
                isValid: null,
                errorMsg: null
            },
            phone: {
                value: null,
                rules: ["required"],
                validate(validator, submitted) {
                    let { isValid, errorMsg } = validator.validationCallback({...this, value: submitted.user.phone});
                    this.isValid = isValid;
                    this.errorMsg = errorMsg;
                },
                isValid: null,
                errorMsg: null
            }

        },
    },
    submission: {
        user: {
            name: null,
            email: null,
            company: null,
            phone: null,
        },
    },
    name: '',
    async init() {
        return new Promise((resolve) => {
            this.type = data.type;
            this.sections = data.sections;
            this.currentSection = data.sections[0];
            this.currentIndex = 0;
            this.name = data.name;
            resolve();
        });
    },
    getValue(index) {
        return `${this.currentIndex}:${this.currentSection.level}:${index}`;
    },
    moveNext(forward) {
        console.log('current selections', this.selections);
        let direction = 1;
        let index = this.currentSection.level || 0;
        if (index === -1) {
            return;
        }
        if (!forward) {
            direction = -1;
        }
        index = index + direction;
        if (index < 0 || index === this.currentSection.levels.length) {
            return;
        }
        this.currentSection.level = index;
    }
};

};`

<div class="mt-4 mr-4 p-4  rounded-lg shadow-md bg-white">
                    <div class="px-4 bg-gradient-to-r from-gray-500 via-gray-900 to-gray-700 text-white rounded">
                        <h5 class="mb-1 text-base font-semibold text-white lg:text-xl inline-block"
                            x-text="currentSection.levels[currentSection.level || 0].name"></h5>
                        <h5 class="mb-1 text-base font-semibold text-white lg:text-xl inline-block"
                            x-text="currentSection.levels[currentSection.level || 0].subtitle"></h5>
                    </div>
                    <ul class="my-2 space-y-3">
                        <template x-for="(item, index) in currentSection.levels[currentSection.level || 0].items">
                            <li>
                                <label
                                    class="flex items-center p-2 text-base text-gray-500 bg-gray-50 rounded-lg hover:bg-gray-100 group hover:shadow">
                                    <input class="text-blue-500 w-4 h-4 mr-2 focus:ring-blue-400 focus:ring-opacity-25 border 
                        gray-300 rounded" type="checkbox" x-model="selections" :value="getValue(index)" />
                                    <span class="flex-1 ml-3" x-text="item.name"></span>
                                </label>
                            </li>
                        </template>
                    </ul>
                    <div class="text-left pt-4">
                        <a class="cursor-pointer border-2 border-pink-800 text-purple-700 bg-white px-3 py-2 w-2/4 rounded font-bold"
                            href="javascript:;;" @click="currentStep='levels';">
                            MAIN MENU
                        </a>
                    </div>
                    <div class="text-right">
                        <button
                            class="py-2 px-14 rounded bg-gradient-to-r  from-purple-700 to-purple-500 text-white capitalize hover:bg-purple-600 focus:outline-none focus:shadow-outline"
                            @click="moveNext(false)">
                            &laquo; Previous
                        </button>
                        <button
                            class="py-2 px-14 rounded bg-gradient-to-r  from-purple-700 to-purple-500 text-white capitalize hover:bg-purple-600 focus:outline-none focus:shadow-outline"
                            @click="moveNext(true)">
                            Next &raquo;
                        </button>
                    </div>
                </div>

这里的数据样本：-

"sections": [
    {

        "id": 1,
        "name": "Governance and leadership",
        "description": "A digital value vision and buy-in from the top management, articulation of a clear digital strategy, alignment of the leadership team’s internal and external actions to the buy-in, clarity of communication top-down about the benefits of digital transformation, well-defined roles, and responsibilities in the accomplishment of the shared goal. ",
        "icon": '/home.png',
        "levels": [{
            "name": "Level 1:",
            "subtitle": "Minimal",
            "icon": "",
            "items": [{ "name": "little buy-in from the executive for digital solutions or strategy" },
            { "name": "a website exists but there is no departmental digital strategy" },
            { "name": "digital value proposition not understood or developed" },
            { "name": "digital opportunities are not understood or defined" },
            { "name": "ad hoc digital projects initiated by internal groups and individuals" },
            { "name": "a social media presence or engagement with customers has not been permitted by the executive" }
            ]
        },
        {
            "name": "Level 2:",
            "subtitle": "Informal & Reactive",
            "icon": '',
            "items": [{ "name": "value proposition of digital starting to be acknowledged by executive" },
            { "name": "exploring the impact of innovation and emerging technologies on the business" },
            { "name": "some one-off collaboration with other departments regarding digital service delivery" },
            { "name": "social media channels are monitored but social media is seen more as a risk than an opportunity" }
            ]
        },
        {
            "name": "Level 3:",
            "subtitle": "Transitional",
            "icon": "",
            "items": [{ "name": "digital strategy in place" },
            { "name": "roles and responsibilities for delivering the digital strategy are clear and understood" },
            { "name": "benefits are well-defined, understood" },
            { "name": "strategic digital partnerships with other departments" },
            { "name": "focussed on audiences and their needs and emerging technologies" },
            { "name": "pro-active engagement with customers across all digital channels" },
            { "name": "the benefits of social media are understood and drive social media activity" },
            ]
        },
        {
            "name": "Level 4:",
            "subtitle": "Customer driven",
            "icon": "",
            "items": [{ "name": "digital strategy integrated into departmental planning process and influences overall organizational strategy and direction" },
            { "name": "benefits are well-defined, understood and drive all digital activity" },
            { "name": "KPIs and benefits to the business and customers understood, monitored and reported on " },
            { "name": "seamless customer experience across all channels - digital and non-digital" },
            { "name": "strategic collaboration with other departments, utilizing multiple channels" },
            ]
        },
        {
            "name": "Level 5:",
            "subtitle": "Transformed",
            "icon": "",
            "items": [{ "name": "digital strategy is embedded in, and indistinguishable from, the organizational vision and strategy" },
            { "name": "executive understands and fully embraces digital channels and leads by example" },
            { "name": "new services and products are born digital" },
            { "name": "non-digital services and products are re-engineered, joined up and re-born as digital" },
            { "name": "digital services and channels drive the organizational structure and reporting" },
            ]
        },
        ],
        started: true,
    },],

}

Answer 1

您需要向复选框生成循环中添加一个唯一的key attribute，这样Alpine.js就可以完全识别和删除旧项。您可以为键使用特定复选框的动态值：

<template x-for="(item, index) in currentSection.levels[currentSection.level || 0].items" :key="getValue(index)">

此外，在init()方法中，您忘记将level设置为0：

this.currentSection.level = 0;