Vue数据绑定隐藏的神坑....

时间 2019-12-11

标签 vue 数据绑定隐藏繁體版

原文原文链接

今天被Vue的一个坑给折磨了一天，终于发现是什么问题，咱们先来模拟一个场景：
代码以下：javascript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model='sendJson.name'>
        <button @click='showName'>打印输入框的值</button>
    </div>
    <script type="text/javascript" src='./vue.min.js'></script>
    <script type="text/javascript">
    new Vue({
        el:'#app',
        data(){
            return{
                sendJson:{}
            }
        },
        methods:{
            showName(){
                console.log(this.sendJson.name)
            }
        }
    });
    </script>
</body>
</html>

咱们进页面就点按钮，你猜会输出什么？html

是undefined，不算奇怪，你什么都没输入，固然是undefined了。vue

OK，接下来刷新页面，进去多一步操做，先点击一下input输入框，在点击按钮，只是多作这一步操做：java

输出的是空白，在chrome中空白就表明空字符串，能够修改一下打印结果：console.log(this.sendJson.name === "")chrome

其实这看起来不是个大问题，可是在个人场景里问题就大了。app

我要把输入框内的值做为一个对象的属性，问题就来了，看图：this

这个坑牛逼不，我真是个奇葩。3d