vue+el-table中放图片隐藏显示?

Question

vue+vue+el-table中放了两个图片, 一个开始, 一个暂停, 默认设置了暂停, 当点击开始的时候要把暂停按钮图片隐藏显示播放按钮图片, 所以一开始我就设置播放按钮为false, 但是在事件点击中不管你点击暂停还是播放, 下面的按钮同时触发, 也就是没有得到this

下面是我点击播放按钮, 同时触发

html

<el-table-column width="70">
    <template slot-scope="scope">
        <div class="switch">
            <img class="suspend" v-if="suspendBtn" @click="start(scope.row)" src="../../../../assets/index/start_hover.png">
            <img class="start" v-if="startBtn" @click="suspend" src="../../../../assets/index/suspended.png">
        </div>
    </template>
</el-table-column>

js

  data() {
    return {
      startBtn: false,
      suspendBtn: true,
    };
  },
   methods: {
    start() {
        this.startBtn = true;
        this.suspendBtn = false;
    },
    suspend() {
        this.startBtn = false;
        this.suspendBtn = true;
    }
  }

Answer 1

确定两个方法都写在 methods里面？ 我怎么看着像是写在data里面啊

Answer 2

你的每一个按钮绑定的事件是一样的，当startBtn变的时候，当然都变了
这个思路是错的
你可以换成保存播放的index，点击这只当前播放的index

Answer 3

因为每个用的suspendBtn，startBtn都是同一个吧，可以把他放在表格每行的数据里，就跟你的时间那个数据似的，