求助:在console中实时打印<input type="radio" />的选择内容

大家好,我写了如下代码:

    <div id="app">
        <div style="margin-top: 20px;">
            <input type="radio" id="one" value="One" v-model="picked" @click="log" />
            <label for="one">One</label><br>
            <input type="radio" id="two" value="Two" v-model="picked" @click="log"/>
            <label for="two">Two</label><br>
            <span>Picked: {{ picked }}</span>
        </div>
    </div>    

    <script>
        var vm = new Vue({
            el : "#app",
            data : {
                picked : ""
            },
            methods : {
                log: function(){
                    console.log(vm.picked)
                    
                }
            }
        })
    </script>

想要实现在点击选择时在console中实时打印出选择的内容,

然而结果并非我期望的功能:
第一次点击时,无论点击哪一个选择项,console打印均为空;
第二次点击,假设第一次点击One,现在再次点击One,则显示One;如果第一次点击了One,第二次点击Two,则仍然显示One;反之第一次点击Two,现在再次点击Two,则显示Two;如果第一次点击了Two,第二次点击One,则仍然显示Two;
。。。

以此类推。。。

请问问题出现在哪里?
谢谢!

问题出在你访问元素状态的时机不对

用户点击 <input type="radio">,click 事件会先触发,change 事件会后触发(如果确实存在 change)。v-model 默认监听 change 事件,所以当 click 事件触发时,v-model 还没有收到状态更新,在你看来的表象就是控制台输出了「过去」的值——实际上,控制台输出的是 click 事件「实时」的值,只是这时 v-model 还没开始工作。

如果我理解的没错,你的需求是输出用户选择的「结果」,所以你的关注点应该是「状态什么时候变化了」,而不是元素什么时候被用户点击了:

watch: {
  picked (value) {
    console.log(value)
  }
}

你好,首先感谢你的回答!

确实如你所说我的需求是输出用户选择的结果,而且click事件会先于v-model更新数据触发导致获取的不是最新的值,为了解决这个问题,我把代码中的事件捕捉由@click改为@change,代码运行正常。

你所提供的watch也是一个有效的方法。:smile: