Material management (three) - Collect all the radio buttons to switch -radio style components hidden or - hide pagination paging component & Collect material - state switching -async asynchronous method to submit background data

04- Material management - all collections and switch

• Monitor user switching behavior ( button style radio single-box components of value change events)

  Components Website: button style radio single box assembly
  https://element.eleme.cn/#/zh-CN/component/radio

  • Look at the name of the event: change
  • Transmission parameters: the value of the selected label (v-model feedback reqParams.collect)
  • When the filter criteria changes: Setting the page number on the first page
  • You can re-query

div box change event to add:

<el-radio-group @change="changeCollect"

methods to modify the event method:

// 切换了全部收藏
    changeCollect () {
      this.reqParams.page = 1
      this.getImages()
    },

Paging is less than 2, hide pagination pagination components:

Website: hide pagination paging component
https://element.eleme.cn/#/zh-CN/component/pagination

 <el-pagination
      style="text-align:center"
      background layout="prev, pager, next"
      :total="total"
      :page-size="reqParams.per_page"
      :current-page="reqParams.page"
      @current-change="changePager"
      //直接添加已有的事件属性
+      hide-on-single-page
      ></el-pagination>

05- Material management - collection of material

• Click on the icon Collection
  • If the state is not collection: Add to Favorites
  • On the other hand, canceled collection
  • Send request
    • Success: the state of the picture is canceled collection icon collection icon red white

<span @click="toggleCollect(item)" class="el-icon-star-off" :class="{red:item.is_collected}"></span>

Asynchronous method to submit data using async

// 切换图片状态
    async toggleCollect (item) {
      // 提交给后台的状态  说白就是当状态的取反
      const { data: { data } } = await this.$http.put(`user/images/${item.id}`, {
        collect: !item.is_collected
      })
      // 操作成功（取消收藏成功  添加收藏成功）
      this.$message.success(data.collect ? '添加收藏成功' : '取消收藏成功')
      // 更新列表（重新获取后台数据进行更新） 后端有排序 收藏的图片靠前排序
      // 更新当前图片的数据 数据驱动视图 更新图标颜色
      item.is_collected = data.collect
    },