初始化按钮的disabled 的Boolear

Question

列表一共有十条数据，当点击记录详情进到详情页传1， 如果列表有五条数据，点击第五个的时候，如何让下一条按钮给禁用，上一条可以点击 下面的两个按钮就是

这里代码是初始化控制disabled 的值

Answer 1

这和分页<>是一个道理吧，既然能知道点击的是第几条就可以给disable赋值，table的length可以直接获取

Answer 2

直接用itemindex的值控制按钮的disabled就可以了

this.disabledNext = this.itemindex >= 10
this.disabledPrevious = this.itemindex <= 1

然后点击详情和按钮的时候更新itemindex值

Answer 3

vue 的话，推荐把 disabledPrevious 和 disabledNext 设置为 computed 属性，使其自动跟着 itemIndex 变化。
点击详情按钮更新 itemIndex 为当前点击项的索引，点击上一条 itemIndex - 1 下一条 itemIndex + 1

html

<table>
  <tr>
    <th>用户名</th>
    <th>操作</th>
  </tr>
  <tr v-for="(item, index) of list">
    <td>
      {{ item.name }}
    </td>
    <td>
      <button @click="onDetailClick(item, index)">记录详情</button>
    </td>
  </tr>
</table>
<button :disabled="disabledPrevious" @click="onPreviousClick">上一条</button>
<button :disabled="disabledNext" @click="onNextClick">下一条</button>

js

{
  data: {
    list: [
      { name: '小明' },
      { name: '小黑' },
      { name: '张三' },
      { name: '李四' }
    ],
    itemIndex: 0
  },
  computed: {
    disabledPrevious() {
      return this.itemIndex <= 0
    },
    disabledNext() {
      return this.itemIndex >= this.list.length - 1
    }
  },
  methods: {
    onDetailClick(item, index) {
      this.itemIndex = index
    },
    onPreviousClick() {
      this.itemIndex--;
    },
    onNextClick() {
      this.itemIndex++;
    }
  }
}