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

Posted 2023-05-09

【中文标题】复选框的Vue更改事件不起作用

【英文标题】：Vue change event for checkbox is not working

【发布时间】：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 获得的数据动态填充界面。我只尝试了一小部分这种方法。另外，我已经在整个项目中使用了该方法，实际上我现在无法更改其他部分。

【参考方案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 中移出该功能。谢谢你给我一个想法！