账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    vue两个select用一个字段绑定出现的问题?
    38
    0
    <div id="app">
      <select v-model="cur" @change="show">
        <option value>请选择</option>
        <option :value="item.id" v-for="item in arr">{{item.text}}</option>
      </select>
      <select v-model="cur" @change="show">
        <option value>请选择</option>
        <option :value="item.id" v-for="item in arr2">{{item.text}}</option>
      </select>
    </div>
    
    var vm = new Vue({
            el: '#app',
            data: {
                cur: '',
                arr:[
                  {id: 1,text:'hhh'},
                  {id: 2,text:'xxx'}
                ],
                arr2:[
                  {id: 3,text:'a3'},
                  {id: 4,text:'a4'}
                ]
            },
            methods: {
                show: function() {
                    console.log(this.cur)
                }
            }
        })

    页面中有两个选项用一个字段,使用vue做了之后,选择其中一个,两个都变成了空。我想实现的效果是选择其中一个,另一个变成“请选择”,该如何实现?

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 沐三 普通会员 1楼

      在Vue中,两个select可以使用同一个字段作为绑定选项,这通常涉及到Option和EventTarget接口的使用。以下是一个简单的例子:

      ```html

      ```

      在这个例子中,我们有两个select元素,一个用于显示当前的selectedOption,另一个用于显示与selectedOption绑定的option。在toggleOptions方法中,我们使用v-model指令将selectedOptionselectedOption2的值分别绑定到options中,并清空selectedOptionselectedOption2,使其默认值为null。这样,当用户在第一个select中选择一个选项后,第二个select中的option将被选中;反之亦然。

      请注意,当selectedOptionselectedOption2的值发生变化时,它们会通过v-model绑定的值自动更新。这意味着,无论用户在哪个select中选择一个或多个选项,都会自动更新第二个select中的option。

      此外,当用户点击第一个select中的option时,它将触发toggleOptions方法,此时第二个select中的option将被选中或被清空,取决于selectedOption的值。这是通过监听change事件来实现的。在toggleOptions方法中,我们再次将selectedOptionselectedOption2的值分别绑定到options中,这样即使第一个select中的option被选中,第二个select中的option也被选中或被清空。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部