So i have a javascript file that generates png images from 2 json files.
I want to execute this script after the user clicks on the v-btn
Is there a way to import the script and execute it at the on click event ?Im using nuxtjs and the only way i found is to execute the script when the page is loaded.my javascript file consists of 4 functions with one of them calling the 3 other functions.
<template>
<div>
<v-container class="grey lighten-5">
<v-row no-gutters>
<v-col cols="6" md="6">
<v-card class="pa-2" outlined tile>
Choose a reference report.json
<v-file-input
show-size
accept=".json"
placeholder="Click here to select your file"
truncate-length="26"
@change="onAddFileref"
></v-file-input>
</v-card>
</v-col>
<v-col cols="6" md="6">
<v-card class="pa-2" outlined tile>
Choose a test report.json
<v-file-input
show-size
accept=".json"
placeholder="Click here to select your file"
truncate-length="26"
@change="onAddFiletest"
></v-file-input>
</v-card>
</v-col>
</v-row>
</v-container>
<v-btn
color="primary"
elevation="9"
:disabled=!isDisabled
@click="startVisualTest"
>Start Visual Test</v-btn>
</div>
</template>
<script>
var path = require('path');
export default {
data() {
return {
referencefile: null,
refFile: "",
testFile: "",
}
},
methods: {
onAddFiletest(file) {
this.testFile = ""
const fr = new FileReader()
fr.readAsDataURL(file)
this.testFile=file.name
},
onAddFileref(file) {
this.refFile = ""
const fr = new FileReader()
fr.readAsDataURL(file)
this.refFile=file.name
},
startVisualTest(){
var jsonpath="../../json"
var ref=path.join(jsonpath,this.refFile)
var test=path.join(jsonpath,this.testFile)
}
},
computed: {
isDisabled() {
// evaluate whatever you need to determine disabled here...
return this.refFile!="" && this.testFile!="";
}
}
}
</script>