1👍
I have to show some data due to the selected value in the select option
<form>
<select class="select" @change="changeHandler" v-model="selected"> // change listener
<option v-bind:key="item" v-for="item in selectArr">{{item}}</option>
</select>
</form>
export default {
data(){
selected: 'Year',
selectArr: ['Year', 'Month', 'Week']
}
},
methods:{
changeHandler(){
let selected = this.selected;
if (selected === 'Month'){
this.dataChart = [2, 12, 8, 22, 31, 6, 10, 32, 5, 36, 21, 21];
} else if (selected === 'Week') {
this.dataChart = [8, 2, 18, 3, 13, 32, 10, 8, 12, 34, 21, 12];
} else if (selected === 'Year') {
this.dataChart = [44, 49, 48, 49, 55, 47, 43, 55, 53, 43, 44, 51];
}
}
}
0👍
You can watch the change of the “selected” by the watch property…
<script>
export default {
data(){
return{
mydatasets:[{
responsive:true,
borderWidth: 2,
data: [20, 50, 20, 41, 26, 15, 20, 10, 29, 5, 33, 55] // this data should be changed due to selected value
}]
}
},
watch: {
selected: {
immediate: true,
handler: function (newValue) {
switch (newValue) {
case "Year":
// this.mydatasets[0].data = somthing
break;
case "Month":
// this.mydatasets[0].data = somthing
break;
case "Day":
// this.mydatasets[0].data = somthing
break;
}
}
}
}
}
</script>
-2👍
You can do that using php switch case, javascript nor ajax. i will give some example using php.
<?php
$page = null;
if(isset($_POST['page'])){
$page = $_POST['page'];
}
switch($page){
case 'page3': include_once('/path/to/some.php'); break;
case 'page2': include_once('/path/to/some.php'); break;
case 'page1': include_once('/path/to/some.php'); break;
default: include_once('/path/to/default.php'); break;
}
?>
<form action="" method="post">
<select name="page" onchange="window.location=this.value"">
<option value="page1"<?php if($page == "page1"){ echo " selected"; }?>>Year</option>
<option value="page2"<?php if($page == "page2"){ echo " selected"; }?>>Month</option>
<option value="page3"<?php if($page == "page3"){ echo " selected"; }?>>Week</option>
</select>
</form>
Its depens on option clicked.So when you click on Year, the $page get the data -> page1, then open the some.php file to showing your chart year.
- [Vuejs]-Console log message fires despite of the condition statement – Vue2
- [Vuejs]-Vue.js on safari 5.0.6
Source:stackexchange.com