javascript - 来自 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 中修改 react 状态。这可能会导致无限循环，通常这只是个坏主意。

这是一个危险信号:

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

我猜你是用 v-html 把它注入(inject)到 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>