首先

如果明白了就很简单了，但当时花了很多时间解决， 所以留下这个备忘录。

我想做的事情 (Wǒ zuò de

在这种类型的表上，当勾选框被取消选中时，会显示一个确认对话框。

如果是OK，那么复选框将处于关闭状态；
如果是取消，那么复选框将保持为开启状态。

堵塞的事情

当在确认对话框中选择取消时，复选框会变为未选中状态。

当出现取消后仍然处于“OFF”状态的问题时，以下是解决方案的实施方式。

实现（html）

    <div id="app">
        <table>
            <thead>
                <tr>
                    <th>メールアドレス</th>
                    <th>ユーザ名</th>
                    <th>表示</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in mailList" :key="item.email">
                    <td>{{item.email}}</td>
                    <td>{{item.name}}</td>
                    <td>
                        <input type="checkbox" name="checkbox" v-model="item.dispFlg" @click="onClick(index)">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

进行(javascript)编程

        const app = new Vue({
            el: '#app',
            data: {
                mailList: [
                    {
                        email: 'sample_a@gmail.com',
                        name: 'Alice',
                        dispFlg: true
                    },
                    {
                        email: 'sample_b@gmail.com',
                        name: 'Bake',
                        dispFlg: true
                    },
                    {
                        email: 'sample_c@gmail.com',
                        name: 'Cassandra',
                        dispFlg: true
                    },
                    {
                        email: 'sample_d@gmail.com',
                        name: 'Dick',
                        dispFlg: true
                    },
                    {
                        email: 'sample_e@gmail.com',
                        name: 'Ellie',
                        dispFlg: true
                    }
                ]
            },
            methods: {
                onClick(index) {
                    if(this.mailList[index].dispFlg) {
                        const result = confirm(this.mailList[index].name + " のメールアドレスを無効にしますか？");
                        if (!result) {
                            this.mailList[index].dispFlg = true;
                        }
                    }
                }
            }
        })

不太行的地方

如果取消的话，我试图通过设置this.mailList[index].dispFlg = true来重新开启复选框的选中状态。

然而，正如在官方文档中所写的那样，Vue无法检测到对数组直接设置索引和项的更改。

结果是，画面上显示的复选框处于未选中的状态。

方法1：使用preventDefault进行处理

preventDefault 可以阻止事件的传播。

实施 (HTML)

                <tr v-for="(item, index) in mailList" :key="item.email">
                    <td>{{item.email}}</td>
                    <td>{{item.name}}</td>
                    <td>
                        <input type="checkbox" name="checkbox" v-model="item.dispFlg" @click="e => onClick(e,index)">
                    </td>
                </tr>

将Event对象与index一起作为参数传递。

实施（JavaScript）

            methods: {
                onClick(e,index) {
                    if(this.mailList[index].dispFlg) {
                        const result = confirm(this.mailList[index].name + " のメールアドレスを無効にしますか？");
                        if (!result) {
                            e.preventDefault();
                        }
                    }
                }
            }

通过使用preventDefault()函数来阻止事件传播，可以防止复选框的ON⇔OFF切换。

然而，由于实现上的限制，我当时无法使用preventDefault()，这让我感到困扰…（无法将事件从子组件传递到父组件）。

解决方法二：通过提供key属性进行更新

key是在Vue内部用于提取更新前后数据差异的特殊属性。

实施（HTML）

    <div id="app">
        <table>
            <thead>
                <tr>
                    <th>メールアドレス</th>
                    <th>ユーザ名</th>
                    <th>表示</th>
                </tr>
            </thead>
            <tbody :key="updateKey">
                <tr v-for="(item, index) in mailList" :key="item.email">
                    <td>{{item.email}}</td>
                    <td>{{item.name}}</td>
                    <td>
                        <input type="checkbox" name="checkbox" v-model="item.dispFlg" @click="onClick(index)">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

为tbody添加key。

实施（Javascript）

        const app = new Vue({
            el: '#app',
            data: {
                mailList: [
                    // :
                    // 省略
                    // :
                ],
                updateKey: true
            },
            methods: {
                onClick(index) {
                    if(this.mailList[index].dispFlg) {
                        const result = confirm(this.mailList[index].name + " のメールアドレスを無効にしますか？");
                        if (!result) {
                            this.updateKey = !this.updateKey;
                        }
                    }
                }
            }

准备一个名为updateKey的新数据。
如果取消的话，通过更新updateKey的值来促使Vue重新渲染

下的内容。