Using vue.js's cli, I created a basic data register application. The application utilizes lookback.js api with vue cli.
The application consists of three pages: show, add, and edit.
While the show and add pages function correctly, issues arise when attempting to edit existing data in the form. Two errors are generated for each modified label.
One example of a form element is "CMD_OPEN_GATE" in the database (postgresql).
Despite no errors appearing in the console upon page load, new input triggers the following errors:
[Vue warn]: Error in render: "TypeError: state.actionInfo.find is not a function"
TypeError: state.actionInfo.find is not a function
The values are obtained using Vuex, yet it remains unclear where the issue lies within the code.
Below are the relevant code snippets;
Form:
<h3>Action Info</h3>
<input v-model.trim="actionInfo" class="form-control form-group" type="text" @input="$v.actionName.$touch()">
Vuex store.js:
state: {
actionInfo: [],
.....
.....
},
mutations: {
actionInfoValue: (state, actionInfo) => {
state.actionInfo = actionInfo
},
},
getters: {
getActionInfoByID (state) {
return id => {
return state.actionInfo.find(a => { return a.id === id })
}
}
}
Furthermore, the edit page contains the following codes.
methods: {
actionInfoValue (val) {
this.$store.commit('actionInfoValue', val)
}
},
computed: {
actionInfo: { // for action name
get () {
const i = this.$store.getters.getActionInfoByID(Number(this.$route.params.actionId))
if (i) {
return i.action
}
return ''
},
set (value) {
this.$store.commit('actionInfoValue', value)
}
}
}
How can this problem be resolved? It seems like there may be an issue related to string-array compatibility. Despite researching extensively on stackoverflow, a solution has proven elusive.