Bootstrap Vue中点击图标切换颜色并更新数据库状态的实现

代码里的核心问题 #

• 模板状态判断不匹配：模板里用data.status=='done'切换图标，但后端返回的是0/1状态，逻辑完全不对，导致点击后图标无变化。
• 点击事件参数缺失：changeStatus只传了id，无法直接定位当前点击的项，更新本地数据会很繁琐。
• Axios请求与响应处理错误：
  • 请求参数{id,id}是重复传值，后端无法获取要切换的目标状态；
  • 响应处理里用this.res.data是错误的（res是回调局部变量），而且用==做赋值操作（应该用=），根本改不了状态。
• 未更新本地数组状态：就算后端更新成功，也没修改my_name数组对应项的状态，视图不会自动刷新。

修复后的完整代码 #

模板部分

<b-card v-else style="border:none;">
  <b-row v-for="(data,index) in my_name" :key="index" class="p-3 bg-light" style="margin-bottom: 30px;">
    <b-col cols="12">
      <b-row>
        <b-col class="font-weight-bold">
          {{data.name}}<br>
          <span class="font-weight-normal" style="color:#817F7F;"></span>
        </b-col>
        <!-- 传递当前data对象，状态判断改为0/1 -->
        <b-col class="mt-3 mb-0 view-more d-flex align-items-center justify-content-end" @click="changeStatus(data)">
          <b-icon v-if="data.status === 1" icon="check-circle-fill" font-scale="2" variant="success"></b-icon>
          <b-icon v-else icon="check-circle-fill" font-scale="2" variant="secondary"></b-icon>
        </b-col>
      </b-row>
    </b-col>
  </b-row>
</b-card>

脚本部分

export default {
  data: () => ({
    my_name: [],
    loading: false // 补上之前用到但未声明的loading变量
  }),
  created() {
    // 这里需要补充初始化my_name的逻辑，比如调用接口拉取数据
    // 示例：this.fetchMyData()
  },
  methods: {
    // 接收当前项的完整对象作为参数
    changeStatus(item) {
      this.loading = true;
      // 计算要切换到的目标状态
      const targetStatus = item.status === 1 ? 0 : 1;

      axios.post('/api/name/update_my_name', {
        id: item.id,
        status: targetStatus // 将目标状态传给后端
      })
      .then(() => {
        // 后端更新成功后，直接修改本地状态触发视图更新
        item.status = targetStatus;
        this.loading = false;
      })
      .catch((error) => {
        // 兼容错误数据的边界情况
        let error_msg = error.response?.data?.message || '状态更新失败';
        this.$bvToast.toast(error_msg, { variant:'danger', noCloseButton: true, solid:true});
        this.loading = false;
      });
    },
    // 示例：初始化数据的方法
    // fetchMyData() {
    //   axios.get('/api/name/get_my_name').then(res => {
    //     this.my_name = res.data;
    //   })
    // }
  }
}

额外说明 #

• 后端接口需要支持接收id和status参数，执行数据库状态更新操作，确保返回成功响应。
• 如果后端逻辑是自动翻转当前状态（不需要前端传status），可以去掉targetStatus的传递，改为在接口返回后，用后端返回的新状态更新本地item。

内容的提问来源于stack exchange，提问作者felicia