How to change the icon color and update database data after click?

felicia 0
Viewed 26

enter image description here

hi,what i want the result is once i click the icon it will update the database status from 0 to 1, icon color change to green and click again it will go back from 1 to 0 and icon color change from green to grey in bootstrap vue

 <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;"> </b-col>
                           <b-col class="mt-3 mb-0 view-more d-flex align-items-center justify-content-end"  @click="changeStatus(data.id)">
                            <b-icon v-if="data.status=='done'" 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:[],
           
        }),
        created(){
        },
          
        methods: {

            changeStatus(id) {

  axios.post('/api/name/update_my_name',{id,id}).then(res => res.data).then(res => {
                if(this.res.data.status =='0'){
                    
                    this.res.data.status == '1'
                }
                else{
                   this.res.data.status == '0'
                }
                 
              })
              .catch((error) => {
                  let error_msg = error.res.data.message;
                  this.$bvToast.toast(error_msg,{ variant:'danger', noCloseButton: true, solid:true})
                  this.loading = false;
              });
               
                   
                
                 
                      
              
            },
}
bootstrap-vue vue.js
1 Answers

So in your current implementation you changing the icon based on data.status which is my_name[index].data.staus. But when changing the data after api fetched, you assigning this.res.data.status = 0 or 1 which not relevant to what you binding on screen. So should change to:

HTML: Adding index to the click handler

<b-col class="mt-3 mb-0 view-more d-flex align-items-center justify-content-end" @click="changeStatus(data.id, index)">
  <b-icon v-if="data.status=='done'" 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>

In the Viewmodel (I do not refactor your code) something like:

changeStatus(id, index) {
  axios.post('/api/name/update_my_name',{id,id}).then(res => {
    if(this.my_name[index].data.status =='0'){
      this.my_name[index].data.status == '1'
    } else {
      this.my_name[index].data.status == '0'
    }
  })
  .catch((error) => {
    let error_msg = error.res.data.message;
    this.$bvToast.toast(error_msg,{ variant:'danger', noCloseButton: true, solid:true})
    this.loading = false;
  });
}
vicnoob0
Related