鍍金池/ 問答/HTML5  HTML/ Vue下拉選擇某個值時，另外的多選框的值會消失

Vue下拉選擇某個值時，另外的多選框的值會消失

界面如下：

clipboard.png

代碼如下：

<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”這個值
其他選項正常顯示！

//不要問我為什么會有這種奇怪的需求，實際項目中有用到，我只是把問題簡化了。
回答
編輯回答
病癮

你兩個option的value綁定了同一個值了啊，大哥

2018年4月17日 06:08
編輯回答
薄荷糖

可試著添加:key屬性

鏈接描述

2017年6月25日 00:03
編輯回答
孤影

看看是否是你要的效果？
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>
2017年10月7日 02:49
編輯回答
野橘

試了你的代碼沒有問題

<!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>
2017年2月24日 04:29
編輯回答
野橘

首先，并列的多個循環(huán)渲染，最好采用不同的item和index命名，另外，加上key

2017年9月13日 17:13