Vue下拉選擇某個(gè)值時(shí)，另外的多選框的值會(huì)消失

界面如下：

代碼如下：

<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']
    }
})

我想要的效果：
當(dāng)我選中“Jiangxi”時(shí)，第二個(gè)多選框沒有“Nanchang”這個(gè)值
其他選項(xiàng)正常顯示！

//不要問我為什么會(huì)有這種奇怪的需求，實(shí)際項(xiàng)目中有用到，我只是把問題簡化了。

回答

編輯回答

病癮

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

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

編輯回答

野橘

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

2017年9月13日 17:13