DCloud
DCloud
  • 发布:2019-08-23 11:08
  • 更新:2021-08-03 10:52
  • 阅读:3308

【vue.js教程】第11节 表单输入绑定讨论区

分类:ASK社区

此贴为【vue.js教程】第11节 表单输入绑定讨论区,可以在这里分享经验、交流问题。

视频教程链接

2019-08-23 11:08 负责人:无 分享
已邀请:
李红卫

李红卫

OKOK

4***@qq.com

4***@qq.com

这个英语的发音,真的是一塌糊涂

h***@163.com

h***@163.com

你好老师,“value”怎么读来着?

  • h***@163.com

    您讲话太快了,没听清。

    2020-11-06 15:47

Leon_ZHANG

Leon_ZHANG

老师你好,
我参照本节课内容写了如下代码:

   <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;
。。。

以此类推。。。

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

  • 驕傲

    我尝试了一下,给log方法设置一个延时,打印的值是正常的,我猜测点击radio时,是先触发了log方法,然后再给实例里面的picked的value进行更改,导致出现上述的情况

    2020-11-12 21:59

该问题目前已经被锁定, 无法添加新回复