Javascript Vue.js属性中仅触发一次事件的更改_Javascript_Vue.js

Javascript Vue.js属性中仅触发一次事件的更改

javascript vue.js

Javascript Vue.js属性中仅触发一次事件的更改,javascript,vue.js,Javascript,Vue.js,我有以下HTML： <!DOCTYPE html> <html> <head> <script src="vue.js"></script> </head> <body> <div id="app"> <input type="checkbox" :checked="bool" @change="checked(this)"> </div&

我有以下HTML：

<!DOCTYPE html>
<html>

<head>
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="checkbox" :checked="bool" @change="checked(this)">
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data() {
                return { "bool": true }
            },
            methods: {
                checked(elem) {
                    console.log("Hey!");
                    // Cast to bool
                    this.bool = !!elem.checked;
                }
            }
        })
    </script>
</body>


var app=新的Vue({
el:“应用程序”，
数据（）{
返回{“bool”：true}
},
方法：{
已检查（elem）{
console.log（“嘿！”）；
//投靠
this.bool=！！elem.checked；
}
}
})

我计划实现一些更复杂的行为，所以我没有使用

v-model

单击复选框时，每次都会记录控制台消息。但是，

bool

属性仅在我第一次单击时更改，而不会在后续单击时更改。知道出了什么问题吗？

当您尝试添加两个

它只是相互删除，什么也没有发生
所以你可以简单地说
this.bool = !this.bool

是这样的
methods: {
  checked(elem) {
     console.log("Hey!");
     this.bool = !this.bool;
   }
}

问题是您正在立即调用事件处理程序：@change=“checked（this）”。
如果需要访问事件
，请执行以下操作：
模板：
<div id="app">
   <input type="checkbox" :checked="bool" @change="checked('Args', $event)">
</div>

如果您不需要访问事件-您可以这样简单地使用：
<div id="app">
   <input type="checkbox" :checked="bool" @change="bool = !bool">
</div>

对不起，我弄错了<代码>此

不是引发事件的元素，而是全局窗口对象。您可以使用

event.target

接收元素，如下所示：

<input type="checkbox" :checked="bool" @change="checked('Hi!', $event)" id="check">

感谢@an_parubets for

而不是

this.bool=！！选中元素

try

this.bool=！元素已选中

您添加了两个

应该是one@Joseph对不起，我不清楚。我正在尝试执行与this.bool=elem.checked相当的。但是input.checked
是一个DOM事件对象，所以我使用了
将其强制转换为布尔值
但输入的技巧。checked
已经是Dom中的布尔属性，您不需要强制转换它this.bool=elem。checked
导致app.bool
转到未定义的。我认为这是因为input.checked
是一个HTMLInputEvent
对象，不能分配给变量。在这种特殊情况下，这将起作用。但是，我仍然想知道发生了什么，因为这种行为似乎会给我的未来带来问题。@SilverRampart，当您尝试添加一个时它反转逻辑操作，但当您添加两个逻辑操作时，它们会再次相互删除，这并不能解决问题。一次响应一个事件，然后不响应，这似乎不是正确的行为。有人能澄清吗？你需要澄清什么？为什么预期的行动只发生一次，而不是随后发生。在不可能的情况下。尝试console.log（'Hi'）
insidetoggleChecked
。它每次都会开火？在你的问题中，代码中有错误@change=“checked（this）”
-运行一次，因为您可以立即运行它，但不会在change
事件上运行它。当您应该在change
事件上运行时-请尝试@change=“checked”
<input type="checkbox" :checked="bool" @change="checked('Hi!', $event)" id="check">

this.bool = !!event.target.checked;