weixin_44637331 2022-01-23 11:35 采纳率: 100%
浏览 1945
已结题

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 为什么 会导致 个问题

  • 写回答

4条回答 默认 最新

  • CSDN专家-showbo 2022-01-23 12:33
    关注

    改下面这样可以,

    <!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>
    
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题?

问题事件

  • 系统已结题 2月6日
  • 已采纳回答 1月29日
  • 创建了问题 1月23日

悬赏问题

  • ¥15 C#字典调用时报错,有关文件加载
  • ¥100 在连接内网VPN时,如何同时保持互联网连接
  • ¥15 MATLAB中使用parfor,矩阵Removal的有效索引在parfor循环中受限制
  • ¥20 Win 10 LTSC 1809版本如何无损提升到20H1版本
  • ¥50 win10 LTSC 虚拟键盘不弹出
  • ¥30 关于PHP中POST获取数据的问题
  • ¥30 微信小程序请求失败,网页能正常带锁访问
  • ¥15 Python实现hog特征图可视化
  • ¥30 德飞莱51单片机实现C4炸弹
  • ¥50 CrossLink-LIF-MD6000 型 FPGA 的 CMOS 转 MIPI D-PHY IP 核功能使用异常