@click from vuex не работает на компоненте vue

Question

Это из моего магазина.

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 = `<button @click="openApproveModal" class="btn btn-primary">Approve</button>`     
    })

    return state.users
  }
}

Теперь в моем компоненте (свойство mount),

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'}
    ]
  })
}

Предположительно, когда вы нажимаете кнопку Подтвердить

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

Но получается, ничего не вошло. Функция не была вызвана вообще.

Более того, вот так выглядит таблица моего компонента:

 <table class="table table-bordered" id="dataTable" width="100%" cellspacing="">
   <thead>
     <tr>
       <th>Name</th>
       <th>Username</th>
       <th>Status</th>
       <th>Registration Date</th>
       <th width="5">Action</th>
     </tr>
   </thead>
 </table>

Answer 1

Во-первых, вы не должны изменять реактивное состояние внутри геттера. Это может привести к бесконечным циклам, и в целом это просто плохая идея.

Это красный флаг:

v.approve_button = `<button @click="openApproveModal" class="btn btn-primary">Approve</button>`

Я полагаю, вы вводите это в DOM с помощью v-html? Это не сработает. v-html работает только с HTML, но у вас есть шаблон Vue.

Я не знаю, что такое полный шаблон, поэтому я не могу предложить решение, но вы всегда должны избегать v-html привсе затраты (не только для проблем XSS, но обычно это означает, что вы делаете что-то против «пути Vue»).

---

Вот упрощенная демонстрация того, что вы пытаетесь сделать:

// Try to create a Vue button

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

const app = document.querySelector('#app')
app.innerHTML = '<button @click="handleClick">Not Working</button>'

// Do it properly

const componentInstance = new Vue({
  template: '<button @click="handleClick">Working</button>',
  methods: {
    handleClick() {
      alert('Works!')
    }
  }
})

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app"></div>