Question

我正在使用一个复选框。

<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（）中复选框的当前状态采取一些措施，我发现在当前情况下难以实现。

将感谢您提供解决此问题的任何建议。

Answer 1

似乎正在发生的事情是，甚至在 v-model =“ item.checked” 更改之前，Firefox都会立即调用click函数。经过一段时间（例如100毫秒）后，我检查 this.items [index] .checked 的值时，它显示为true。

console.log（this.items [index] .checked）; console.log（已选中）;

public void test(){
      DriverOptions capacidades;

}

Answer 2

因为（对于复选框），v-model绑定@change而不是@input（选中Vue Github: source codes for v-model）。然后@change将在失去焦点后被解雇。

但是您不应该依靠@click或@change将首先执行的顺序（check this answer以获取更多详细信息）。

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

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相同。使用一个ref访问输入的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)（延迟 0秒），它仍然可以正常工作。

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

2 个答案: