[Vuejs]-How to change data due to selected value in select Vue?

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.

Leave a comment