时间戳

首页 > 解决方案 > Firefox 中的 Vue.js 复选框问题，Chrome 和 IE 中的工作文件

vue.js - Firefox 中的 Vue.js 复选框问题，Chrome 和 IE 中的工作文件

问题描述

我正在使用一个复选框。

<template v-for="(item,index) in items">
    <div >
        <input type="checkbox"  
            v-model="item.checked"
            @click="selectionCheckboxClicked(index,item.checked)"   
        />
    </div>          
    .....

这是JS代码

selectionCheckboxClicked: function selectionCheckboxClicked(index,checked) {
            console.log(this.items[index].checked);
            console.log(checked);
            ....
        },

item.checked 的初始值为 false。当我单击 Chrome 或 IE 中的复选框时，它会选中该复选框并在控制台日志中显示“true”。但是，当我在 Firefox 中运行代码时，虽然它确实改变了状态，但控制台日志在 selectionCheckboxClicked() 中显示为 false。我需要根据 selectionCheckboxClicked() 中复选框的当前状态采取一些措施，我发现在当前情况下很难实现。

应感谢任何解决问题的建议。

标签： vue.js

解决方案

因为对于checkbox，不v-model绑定（查看Vue Github: source codes for v-model）。然后会在失去焦点后被解雇。@change@input@change

但是您也不应该依赖订单@click或@change将首先执行（查看此答案以获取更多详细信息）。

因此，一种解决方案是使用@change=handler($event)，因为v-model使用一个名为 important=true 的参数addHandler来确保它比您的事件处理程序首先被触发。

new Vue({
  el: '#app',
  data() {
    return {
      testValues: false
    }
  },
  methods: {
    selectionCheckboxClicked: function(ev) {
      console.log(this.testValues);
      console.log(ev.target.checked);
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
  <div>
    <input type="checkbox" v-model="testValues" @change="selectionCheckboxClicked($event)" />
  </div>
</div>

或者另一种解决方案是使用@input，但您应该依赖于输入 Dom 元素上检查或不检查的内容。

new Vue({
  el: '#app',
  data() {
    return {
      testValues: false
    }
  },
  methods: {
    selectionCheckboxClicked: function(ev) {
      console.log('v-model:', this.testValues);
      console.log('inputCheckedAtDom:', ev.target.checked);
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
  <div>
    <input type="checkbox" v-model="testValues" @input="selectionCheckboxClicked($event)" />
  </div>
</div>

如果你还喜欢用@click，一个解决方案其实是一样的@input。使用 oneref访问输入 Dom 元素。

new Vue({
  el: '#app',
  data() {
    return {
      testValues: false
    }
  },
  methods: {
    selectionCheckboxClicked: function(ev) {
      console.log('v-model:', this.testValues);
      console.log('inputCheckedAtDom:', this.$refs.test.checked);
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
  <div>
    <input ref="test" type="checkbox" v-model="testValues" @click="selectionCheckboxClicked($event)" />
  </div>
</div>

setTimeout 将起作用，因为它将在当前任务完成并重新渲染后执行。即使您使用setTimeout(()=>{}, 0)(delay 0 seconds )，它仍然可以工作。

推荐阅读