Chartjs-How to make a <select> that will select the file that will be used to draw the chart

by

0👍

You could have a <select> with options containing values equal to your .js filenames. When the selection is changed, run a method that dynamically imports that file and assigns the imported data to the variable you pass down as a prop to your Graph component. Simple example code:

<select @change="selectFile">
  <option value="dataFile1">file one</option>
  <option value="dataFile2">file two</option>
</select>
<Graph :vul_data="data" />

data() {
  return {
    data: null,
  };
},
methods: {
  selectFile(e) {
    import(`@/data/${e.target.value}.js`).then((res) => {
      this.data = res.data;
    });
  },
},

Leave a comment