[Vue warn]: Error in render: "TypeError: state.actionInfo.find is not a function"

Question

I built a simple data register application with vue.js's cli. I'm using lookback.js api with vue cli.

I have three pages for this application; show, add, edit.

Show and add page is working correctly but when I'm trying to edit existing data in the form, I'm getting two errors for each modified label.

Here is the one of the form elements, it's normally "CMD_OPEN_GATE" in the DB(postgresql);

When I open the page console it doesn't have any errors, but when I type something new it shows these errors;

[Vue warn]: Error in render: "TypeError: state.actionInfo.find is not a function"


TypeError: state.actionInfo.find is not a function

I'm using here Vuex for getting values. I don't understand what's wrong with the codes.

Also here is the codes;

form:

<h3>Action Info</h3>
<input v-model.trim="actionInfo" class="form-control form-group" type="text" @input="$v.actionName.$touch()">

vuex's 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 })
  }
 }
}

In addition, in the edit page I have these 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 I solve this problem? I think there is a problem with some string-array incompatibility. I read every topic in stackoverflow but I couldn't fix this.

Answer 1

I found a solution:

set (value) {
    this.$store.commit('actionInfoValueEdit', { id: Number(this.$route.params.actionId), action: value })
    // store.commit('addCustomer', { id: '2', name: 'User 2'})
  }

I edited set method like this and it worked.

also, I created a new mutation for this;

actionInfoValueEdit: (state, actionInfo) => {
  state.actionInfo.push(actionInfo)
},

I used push function from here.