Question

我的UI中显示了一些图表。而且我必须通过更改选择来更改此图表，即默认情况下，当用户选择“月”图表应显示过去一个月的数据时，我的图表将显示过去一年的一些数据

    <div class="graph">
      <p>Select {{ selected }}</p>
         <form>
           <select class="select" v-model="selected">
             <option value="year">Year</option>
               <option value="month">Month</option>
                 <option value="week">Week</option>
           </select>
         </form>
   <canvas id="mix" count="2"></canvas>
   <chartjs-line target="mix"></chartjs-line>
   <chartjs-bar :labels="mylabels" :datasets="mydatasets" target="mix"></chartjs-bar>
   </div>
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
                }]
         }
        }
      }

Answer 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];
          }
      }
   }

Answer 2

您可以通过 watch 属性观看“选定”的更改...

<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>

Answer 3

您可以使用php switch case，javascript或ajax做到这一点。我将举一些使用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>

它取决于选择的选项。因此，当您单击Year时，$ page获取数据-> page1，然后打开some.php文件以显示图表年份。

如何通过选择Vue中的选定值更改数据？

3 个答案: