Vue：如何使用 class 绑定启用所选按钮的 class

Question

提醒：学习 Vue :)

我在表格中显示了一个项目列表以及状态按钮

我尝试使用 v-for 但我的搜索和可排序选项不起作用所以我使用 php (laravel) 显示数据所以我只希望我的状态按钮使用 Vue

到目前为止我已经设法让它工作了，但唯一的问题是 class 绑定对点击的项目不起作用，它正在为所有按钮改变

这是我的 html

<td class="center">
    <a href="#" class="btn btn-mini">
    <i class="fa fa-fw" :class="{'fa-thumbs-o-up': form.isStatus, 'fa-thumbs-o-down': !form.isStatus }" @click="onStatus({{$row->id}})">
    </i></a>
</td>

这是我的到期代码

new Vue({
  el: '#viewall',

  data: {
    form: new Form({
      status: '',
      isStatus: true
    }),

    errors: new Errors()
  },

  methods: {
    onStatus(id) {
      this.form.statusUpdate('post', 'updatestatus', id)
    }
  }
})

class Form {
  constructor() {}

  // update status
  statusUpdate(requestType, url, id) {
    let data = new FormData()

    data.set('pageid', id)

    return new Promise((resolve, reject) => {
      axios[requestType](url, data)

        .then(response => {
          this.isStatus = response.data.new_status
        })

        .catch(error => {})
    })
  }
}

Answer 1

要回答这个问题：

the only problem is class binding not working for clicked item and it is changing for all of the buttons

很明显，因为您所有的按钮都依赖于同一个变量 isStatus。

您应该为每个按钮设置不同的 isStatus，例如 isStatus_n:

但我知道您没有那些动态 Vue 数据属性因为它来自 Laravel.

所以你可以这样做：

<td class="center">
    <a href="#" class="btn btn-mini">
        <i class="fa fa-fw" :class="{'fa-thumbs-o-up': form.isStatus_{{$row->id}} && form.isStatus_{{$row->id}}.selected, 'fa-thumbs-o-down': !form.isStatus_{{$row->id}} }" @click="onStatus({{$row->id}})">
        </i>
    </a>
</td>

然后按照你的方法：

// This will insert/update the form.isStatus_n
var newSet = {selected: true};
this.$set(this.form, 'isStatus_'+id, newSet);

做了一个简单的演示：https://jsfiddle.net/j9whxnfs/37/

Vue：如何使用 class 绑定启用所选按钮的 class

Vue: How to enable class of selected button using class binding

php

laravel

vue.js