<!DOCTYPE html>
<html lang="ja">
<head>
<title>Lower and Upper limit with Vue.js</title>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
</head>
<body>
<div id="lowerupper_warp">
<select name="lower" v-on:change="selectLower()" v-model="lower_value">
<option value="" >Select lower limit</option>
<option v-for="(o, key) in lower_list" v-text="o" v-bind:value=key></option>
</select>
<select name="upper" v-model="upper_value">
<option value="" >Select upper limit</option>
<option v-for="(o, key) in upper_list" v-text="o" v-bind:value=key></option>
</select>
</div>
</body>
<script>
var select_prefecture = new Vue ({
el : '#lowerupper_warp',
data: {
lower_value: 0,
upper_value: 0,
lower_list: {},
upper_list: {},
full_list: {
0: 0,
1 : 1,
2 : 10,
3 : 100,
4 : 1000,
5 : 10000,
},
},
methods: {
selectLower() {
var selected_value = this.lower_value;
const deleted_target = range(0, selected_value - 1);
this.upper_list = JSON.parse(JSON.stringify(this.full_list));
deleted_target.forEach((value, i) => {
delete this.upper_list[value];
});
if(this.lower_value > this.upper_value){
this.upper_value = this.lower_value;
}
},
},
mounted() {
this.lower_list = JSON.parse(JSON.stringify(this.full_list));
this.upper_list = JSON.parse(JSON.stringify(this.full_list));
}
});
const range = (start, end) => {
const list = [];
for (let i = start; i <= end; i++ ) {
list.push(i);
}
return list;
}
</script>
</html>
More than 3 years have passed since last update.
Register as a new user and use Qiita more conveniently
- You get articles that match your needs
- You can efficiently read back useful information
- You can use dark theme