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

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条回答 默认 最新

    报告相同问题?

    问题事件

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

    悬赏问题

    • ¥15 用循环结构解决,刚学C语言
    • ¥16 请问pyglet如何做出不同按扭跳转不同页面的效果,以及如何储存选择选项的次数(语言-python)
    • ¥15 python怎么自动填表、登录?
    • ¥15 python列表嵌套按条件合并
    • ¥15 VBA怎么把工作簿A中的第N列,复制到工作簿B中的第N列。
    • ¥20 除了狗屎npm, 推荐一些编写web应用的方式?
    • ¥30 如何对嵌套结构体进行动态内存分配
    • ¥15 关于sprintf的几个问题
    • ¥15 不确定行列数的迷宫文件传入
    • ¥15 怎么解决kali linux从root文件夹里复制文件权限不够的问题