时间戳

首页 > 解决方案 > 复选框的Vue更改事件不起作用

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

问题描述

我正在使用VUE传递该功能，并且在检查复选框时，该功能不会由更改事件触发。我不确定问题是否是因为我将它写在已安装或其他任何东西上。

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>

标签： htmlvue.js

解决方案

用模板用 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 实例之外的全局函数。

推荐阅读