Just starting out with Vue.js and I'm trying to figure out how to update the component's state from a function in another file. I have a basic form with only an input file element.
Once the user selects a file, the onChange handler will be triggered, but I'm unsure of how to update the state within other functions.
Here is the code snippet:
utils.js:
export const handleUpload = function(event, state) {
console.log('Selected file: ', event.target.files[0]);
// Need to update the selected state here.
};
Component:
<template>
<div>
<input
type="file"
accept="image/*"
name="photo"
@change="onFileSelection($event)"
/>
</div>
</template>
<script>
import { handleUpload } from './utils';
export default {
name: 'Index',
date() {
return {
selected: null
};
},
methods: {
onFileSelection: handleUpload
}
};
</script>