When the Vue drop-down selects a value, the value of the other multiple check boxes disappears
the interface is as follows:
The
code is as follows:
<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:"-sharpapp",
data:{
region:["Jiangxi","Shanghai","Zhejiang","Shenzhen"],
citys:["Nanchang","Haikou","Jinhua","Baoan"]
}
})
what I want:
when I select "Jiangxi", the second multi-check box does not have the value of "Nanchang"
other options display properly!
//
the value of your two option is bound to the same value, big brother
tried your code without a problem
<!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: "-sharpapp",
data: {
region: ['Jiangxi', 'Shanghai', 'Zhejiang', 'Shenzhen'],
citys: ['Nanchang', 'Haikou', 'Jinhua', 'Baoan']
}
})
</script>
</body>
</html>
see if it's the effect you want?
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: "-sharpapp",
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; iPP){
if(val === region[i]){
citys.splice(i, 1)
}
}
this.citys = citys
}
}
})
</script>
</body>
</html>
try adding : key attribute
ide/list.html-sharpkey" rel=" nofollow noreferrer "> Link description
first of all, side-by-side rendering of multiple loops, preferably with different item and index names, plus key
