nanadjei2
353
3
Vue

Checkbox Toggle value not returning

Posted 1 year ago by nanadjei2

This is my html:

     <tr v-for="(user, index) in users">
    <td>@{{ index + 1 }}</td>
    <td v-text="user.name"></td>
    <td>@{{ user.email }}</td>
    <td>@{{ user.status }}</td>
    <td>
        <div class="btn-group pull-rights" role="group" aria-label="action-btns">
        <form :id="`statusform${user.id}`" :action="`${baseUrl}/${user.id}/update/status`" method="POST">
        {{ csrf_field() }} {{ method_field('PUT') }}
    <label class="ui-switch mt-1 mr-2">
     <input :id="`checkbox${user.id}`" @click="onSwitchStatus(user.id)" type="checkbox" name="status" true-value="active" false-value="inactive" :value="user.status" v-model="statuses=user.status">
    <i></i>
         </label>
    </form>

    </div>
  </td>
</tr>

This is my script:

    const vm = new Vue({

    el: '#vueHook',

    data: {

        statuses: [],

        baseUrl: baseUrl+'/admin/manage/users',

        users: [
            { id:'1', name:'Prof. Kathryne Waelchi', email:'[email protected]', status: 'active' },
            { id:'2', name:'Monique Leannon', email:'[email protected]', status: 'inactive' },
            { id:'3', name:'Magnus Waelchi', email:'[email protected]', status: 'active' },
            { id:'4', name:'Ms. Laurianne Simonis', email:'[email protected]', status: 'inactive' },
            { id:'5', name:'Dr. Doris Runte', email:'[email protected]', status: 'inactive' },
            { id:'6', name:'Imani Smitham', email:'[email protected]', status: 'active' },
            { id:'7', name:'Mrs. Mozell Keeling', email:'[email protected]', status: 'active' },
            { id:'8', name:'Sylvester Kemmer III', email:'[email protected]', status: 'inactive' },
            { id:'9', name:'Percival Kerluke', email:'[email protected]', status: 'inactive' },
                        
        ]

    },

    methods: {

        axiosHeaders() {
            axios.create({
                timeout: 1000,
                headers: {'X-Custom-Header': token}
            });
        },

        onSwitchStatus(id) {
            let $this = this;

            $('#statusform'+id).submit(function(e) {
                e.preventDefault();
            });

            this.axiosHeaders();

            console.log(this.statuses);
          
        }
    
    }

})

My console.log returns inactive always when I toggle the button

Please sign in or create an account to participate in this conversation.