v-model与三元运算符结合使用的BUG

问题遇到的现象和发生背景

最近一位后端同事在使用vue的v-model时，遇到一个问题。他是这样使用v-model的

<input type="text"   v-model="flag?msg2:msg1"/>

看着挺不错的，一行代码就实现了。避免了v-if+ v-else。

<input type="text"   v-if="flag"  v-model="msg2"/> 
<input type="text"   v-else  v-model="msg1"/>

但事与愿违，这并不能实现动态的双向绑定。
导致的问题：v-model 不会根据 flag 的值（布尔）动态的绑定msg2，但可以绑定msg1。当时我用v-if实现的他的目的。研究了几天，但还是不能解释这个奇怪的现象。

问题相关代码，请勿粘贴截图

这是我测试的代码。

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
</head>
<body>
    <div id="example-1">

        <div>
             <input type="checkbox" v-model="flag"> {{flag}}  target:{{flag?'msg2':'msg1'}}
        </div>

        <div>
            <input type="text"   v-model="flag?msg2:msg1"/>
        </div>

        <div>
            msg1： <input v-model="msg1"/>
        </div>
    
        <div>
            msg2：<input v-model="msg2"/>
        </div>

    </div>
    <script type="text/javascript">
        new Vue({
            el: '#example-1',
            data: {
                selected: 'A',
                flag: true,
                msg1:'',
                msg2: ''
            }
        })
    </script>
</body>
</html>
运行结果及报错内容

img

我的解答思路和尝试过的方法

  1. 换一种方式：用&&与|| 来实现三元运算符。

    <input type="text"   v-model="(flag && msg2) || msg1"/>

    结果编译通不过：SyntaxError: Invalid left-hand side in assignment in

  2. 给三元运算符加个小括号

    <input type="text"   v-model="(flag?msg2:msg1)"/>

    结果也编译通不过：SyntaxError: Invalid left-hand side in assignment in

我想要达到的结果

v-mdel 为什么 会导致 个问题

改下面这样可以，

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
</head>
<body>
    <div id="example-1">

        <div>
            <input type="checkbox" v-model="flag"> {{flag}}  target:{{flag?'msg2':'msg1'}}
        </div>

        <div>
            <input type="text" v-model="model[flag?'msg2':'msg1']" />
        </div>

        <div>
            msg1： <input v-model="model.msg1" />
        </div>

        <div>
            msg2：<input v-model="model.msg2" />
        </div>

    </div>
    <script type="text/javascript">
       vue= new Vue({
            el: '#example-1',
            data: {
                selected: 'A',
                flag: true,
                model: {
                    msg1: '',
                    msg2: ''
                }
            }
        })
    </script>
</body>
</html>

可以使用计算属性 。 或者你这种写法我试了一下可以 你看看这歌例子
https://codepen.io/guyu521/pen/poWMZEp

总的来说 其实 v-model上面 直接使用三元是会报错的，

搞清楚其实在 vue2 当中 v-model是 :value 和 @input 的语法糖

你完全可以拆开

<input type="text" :value="flag?msg2:msg1" @input="inputChange"/> 

inputChange(e){
if(this.flag){
this.msg2 = e.target.value
}else{
this.msg1 = e.target.value
}
}
您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！
PS：问答VIP年卡 【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632