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

我想您是使用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>

vuex中的@click在vue组件上不起作用

1 个答案: