samedi 28 mai 2016

Vue js fetching checkbox

I am new to vuejs. i would like to check the checkbox based on data fetched from database. I would also like the change the checkbox value and update. How do i do that with vuejs?. This is how i am trying to do in laravel blade template:

<div class="well well-lg">
                            <div class="checkbox" v-for="action in ActionList">
                                <label><input type="checkbox"
                                              v-model="newActionAdminRole.ActionAdminRole"
                                              v-bind:checked="ActionChecked(action.actionID)"
                                              value="@"
                                              name="ActionCheckbox">@</label>
                            </div>
                        </div>
                        <button type="submit" style="float:right;"
                                v-bind:class="['btn', newActionAdminRole.ActionAdminRole.length == 0 ? 'btn-default' : 'btn-primary']"
                                v-on:click.prevent="saveActionAdminRole">
                            Save
                        </button>
                        <input type="hidden" value="" name="_token">
                    </form>

Here is my vuejs:

data: {
        newActionAdminRole: {
            selected: [],
            ActionAdminRole: []
        },

        adminroles: [],

        permissions: [],
        ActionList: '',
        roles: '',
    },



     methods: {
///this fetches the action details assigned to the role from the database
    fetchActionDetail: function (id) {
                NProgress.start();
                this.newActionAdminRole.ActionAdminRole = [];

                var self = this;
                this.$http.get('/cimsm/public/api/getActionAdminRole/' + this.newActionAdminRole.selected).then(function (response) {

                    var data = response.data;

                    self.$set('permissions', data);


                });

                NProgress.done();

            },
    ActionChecked: function(val){
                this.permissions.forEach(function(perm){
                    if(perm.actionID==val)
                    {
                        return true;
                    }


                })

am i doing it wrong?



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire