来自 vuex 的 @click 不适用于 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
  }
}

现在在我的组件中（挂载的属性），

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">
   <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

首先，您不应该在 getter 中修改反应状态。这可能会导致无限循环，通常是个坏主意。

这是一个危险信号：

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

我想你是用v-html 将它注入到 DOM 中？那是行不通的。 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>