I am facing an issue with a button used to log in the user via onSubmit function when a form is filled out. I also need to call another method that will retrieve additional data about the user, such as privileges. However, I have been unsuccessful in making it work. I attempted to place the code from the desired method directly inside the onSubmit() function, but it did not yield the desired results. Below is the relevant code:
Below is the form where the button is located.
<form @submit.prevent="onSubmit">
Some code
<button class="btn btn-success" type="submit">Log in</button>
</form>
This is the script being used.
<script lang="ts">
import {defineComponent, reactive} from 'vue'
import userStore from '../store/user'
import { useStore } from "vuex";
export default defineComponent({
setup() {
const form = reactive({
username: "",
password: "",
});
//Calls the login function in user.ts
const onSubmit = () => {
userStore.login(form.username, form.password);
form.username = "";
form.password = "";
};
//Returns the store in the main so that the form can have a template that displays the error message.
return {form, userStore, onSubmit}
},
methods:{
//Despite efforts, this section did not work as intended. The useStore method could not be accessed from "methods" but was accessible from setup/mounted.
//The requirement is for it to be updated only after clicking on the submit button.
setUserState(){
const store = useStore();
store.dispatch("setActiveUser");
},
}
})
</script>