@click from vuex does not work on the vue component

Question

This is from my store.

getters: {
  getFormattedUsers (state) {
    state.users.forEach(v => {
      v.fullname = `${capitalize(v.fname)} ${capitalize(v.lname)}`
      v.created_from_now = moment(v.created_at).fromNow()
      v.approve_button = ``     
    })

    return state.users
  }
}

Now in my component (mounted property),

async mounted () {
  await this.initializeUsers()

  $('#dataTable').DataTable({
    data: this.getFormattedUsers(),
    columns: [
      {data: 'fullname'},
      {data: 'username'},
      {data: 'is_approved'},
      {data: 'created_from_now'},
      {data: 'approve_button'}
    ]
  })
}

Supposedly, when you click on the Approve Button

methods: {
  openApproveModal (id) {
    console.log('Approved!')
  }
}

But turns out, it logged nothing. The function was not called at all.

Moreover, this is what my component's table look like:

 
   
     
       Name
       Username
       Status
       Registration Date
       Action

user_734040 · Answer

Firstly, you shouldn't be modifying reactive state inside a getter. This can lead to infinite loops and in general is just a bad idea.

This is a red flag:

v.approve_button = ``

I suppose you're injecting that into the DOM with v-html? That won't work. v-html only works with HTML but what you have is a Vue template.

I don't know what the full template is so I can't suggest a solution, but you should always avoid v-html at all costs (not only for the XSS concerns, but it usually indicates you're doing something against the "Vue way").

Here's a simplified demo of what you're trying to do:

// Try to create a Vue button

function handleClick() {
  alert('You will not see this')
}

const app = document.querySelector('#app')
app.innerHTML = ''

// Do it properly

const componentInstance = new Vue({
  template: '',
  methods: {
    handleClick() {
      alert('Works!')
    }
  }
})

componentInstance.$mount()
app.appendChild(componentInstance.$el)

@click from vuex does not work on the vue component

1 Answers