Vue下拉选择某个值时，另外的多选框的值会消失

界面如下：

代码如下：

<div id="app">
    <select>
        <option :value="item" v-for="item in region">{{item}}</option>
    </select>    
    <select>
        <option :value="item" v-for="item in citys">{{item}}</option>
    </select>
</div>
--------------------
new Vue({
    el:"#app",
    data:{
        region:['Jiangxi','Shanghai','Zhejiang','Shenzhen'],
        citys:['Nanchang','Haikou','Jinhua','Baoan']
    }
})

我想要的效果：
当我选中“Jiangxi”时，第二个多选框没有“Nanchang”这个值
其他选项正常显示！

//不要问我为什么会有这种奇怪的需求，实际项目中有用到，我只是把问题简化了。

阅读 3.3k

看看是否是你要的效果？
only express thought


<!DOCTYPE html><!DOCTYPE  
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
</head>

<body>
  <div id="app">
    <select v-model="selected1">
      <option :value="item" v-for="item in region">{{item}}</option>
    </select>
    <select v-model="selected2">
      <option :value="item" v-for="item in citys">{{item}}</option>
    </select>
  </div>
  <script>
    new Vue({
      el: "#app",
      data: {
        selected1: '',
        selected2: '',
        region: ['Jiangxi', 'Shanghai', 'Zhejiang', 'Shenzhen'],
        citys: ['Nanchang', 'Haikou', 'Jinhua', 'Baoan']
      },
      watch:{
        selected1(val, oldval){
            let region = this.region;
            let citys = ['Nanchang', 'Haikou', 'Jinhua', 'Baoan'];
            for(let i = 0; i<region.length; i++){
                if(val === region[i]){
                    citys.splice(i, 1)
                }
            }
            this.citys = citys
        }
      }
    })

  </script>

</body>

</html>

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script> </head> <body> <div id="app"> <select> <option :value="item" v-for="item in region">{{item}}</option> </select> <select> <option :value="item" v-for="item in citys">{{item}}</option> </select> </div> <script> new Vue({ el: "#app", data: { region: ['Jiangxi', 'Shanghai', 'Zhejiang', 'Shenzhen'], citys: ['Nanchang', 'Haikou', 'Jinhua', 'Baoan'] } }) </script> </body> </html>

Vue下拉选择某个值时，另外的多选框的值会消失

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

css布局怎么保证右边一直在可视范围内？