复选框的Vue更改事件不起作用答案

【问题标题】：Vue change event for checkbox is not working复选框的Vue更改事件不起作用
【发布时间】：2021-03-09 13:19:48
【问题描述】：

我使用Vue来传递函数函数且检查复选框时，更改事件不会触发该功能。我不确定问题是因为我将它写在mounted上还是其他任何东西上。

mounted() {
        var self = this;
        let id = this.$route.params.id;

        var chkInfo = [];
        chk.where("partId", "==", id).get()
            .then(function (querySnapshot) {
                querySnapshot.forEach(function (doc) {
                    var data = doc.data();

                    chkInfo.push({ chk_id: doc.id, d: data.detail, s: data.sequence, status: data.status });
                });

                let html = '';
                for (let i = 0; i < chkInfo.length; i++) {

                    html += `
                            <li class="todo-item">
                                <input type="checkbox" value="" @change="updateTodo()" class="todo-item__checkbox">
                                    <label class="word">${chkInfo[i].d}</label>
                            </li>
                     `;
                }
                self.todoList = html;
            })
    }

Vue 的模板。我使用componentKey重新加载组件，以便数据可以动态填充到界面。

<section>
    <label>Checklist:<br/></label>
      <input v-model.trim="newTodo" id="todo-box" placeholder=" Add new todo"/>
       <button type="submit" @click.prevent="addTodo()" class="new-todo-button" :disabled="!todoFilled">Add</button>
           <ul class="todo-list">
               <div v-html="todoList"></div>
               <div v-html="addList" :key="listKey"></div>
           </ul>                      
 </section>

【问题讨论】：

你在哪里定义了updateTodo函数？..我没看到
是的，我在那里的方法上写了它。目前，函数中除了控制台日志消息外没有编写任何代码，并且日志消息不会出现在控制台中。
为什么不使用模板部分来创建 Dom 而不是 JavaScript
我在 javascript 中创建 dom 以根据从 firestore 获得的数据动态填充界面。我只尝试了一小部分这种方法。另外，我已经在整个项目中使用了该方法，实际上我现在无法更改其他部分。

标签： html vue.js

【解决方案1】：

用 Vue 的方式用模板来做怎么样？

<template>
  <div>
    <div v-for="(info, index) in chkInfo" :key="index">
      <li class="todo-item">
        <input type="checkbox" v-model="info.d" @change="updateTodo(info.d)" class="todo-item__checkbox" />
        <label class="word">{{info.d}}</label>
      </li>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      chkInfo: []
    }
  },
  mounted() {
    let id = this.$route.params.id;
    chk.where("partId", "==", id).get()
        .then(function (querySnapshot) {
            querySnapshot.forEach(function (doc) {
                var data = doc.data();
                chkInfo.push({ chk_id: doc.id, d: data.detail, s: data.sequence, status: data.status });
            });
        })
      }
  }
</script>

如果实在无法修改模板，则应将其声明为 vue 实例外的全局函数。

【讨论】：

我已经在整个项目中使用该方法，实际上我现在无法更改其他部分。顺便说一句，我也尝试将值传递给函数，但该函数仍然没有触发。
您能展示一下您是如何在组件中呈现该 html 的吗？
当然，等一下我更新帖子。已更新 =)
由于 html 被渲染为纯 html，因此不会调用该函数，因为它不在 vue 实例中。我认为您需要将其移动到模板中。以你的方式调用它的方法是将它创建为 vue 实例之外的全局函数
哦，在那种情况下，我从 Vue 中移出该功能。谢谢你给我一个想法！