As someone new to VueJS, I'm currently working on a VueJS application that provides information about a Github user. For example, you can check out details for .
I've set up a store using VueX, but I'm facing an issue with updating the value entered by the user in the input field. The "inputValue" always remains as "" (its default value) even when I type something in the input field.
I've attempted the following implementation:
<template>
<div class="input">
<input
type="text"
:placeholder="placeholder"
v-model="inputValue"
@change="setInputValue(inputValue)"
@keyup.enter="getResult(inputValue)"
/>
<input type="submit" @click="getResult(inputValue)" />
</div>
</template>
<script>
import store from "../store";
export default {
name: "Input",
props: {
placeholder: String,
},
computed: {
inputValue: () => store.state.inputValue,
},
methods: {
setInputValue: (payload) => {
store.commit("setInputValue", payload);
}
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
and also this within `store/index.js`:
import Vue from "vue";
import Vuex from "vuex";
import axios from "axios";
Vue.use(Vuex);
export default new Vuex.Store({
state: {
inputValue: "",
},
getters: {
getInputValue(state) {
return state.inputValue;
}
},
mutations: {
setInputValue(state, payload) {
console.log("setInputValue");
console.log("payload ", payload);
state.inputValue = payload;
},
},
});