[Vuejs]-Use vue to enable disable record in blade template

by

0👍

✅

U can make a Vue component called '<module>' and then and then use the directive and then combine the blade foreach to make a '<module>' component foreach module identified with a v-key.

Example:

@foreach($modules as $module)
  <module v-key="{{$module->id}}" name="{{$module->name}}" is-enabled="{{$module->enabled()}}"> 
@endforeach

Then inside the '<module>' component u can use the v-if of v-show to enable or disable each component.

here is a link for the documentation on Conditional Rendering:
https://v2.vuejs.org/v2/guide/conditional.html

0👍

Hope this helps:

<div class="content">
   <table id="moduleTable">
      <tr>
         <th>Module Name</th>
         <th>Status</th>
         <th>Update</th>
      </tr>
      <tr v-for="(module,index) in modules">
         <td >@{{module.name}}</td>
         <td><span v-if="module.enabled"> Enabled
         <span v-else>Disabled</span></td>
         <td><span v-if="module.enabled"><button @click="toggleModule(module.name,index)">Disable</button></span>
            <span v-else><button @click="toggleModule(module.name,index)">Disable</button></span>
         </td>
      </tr>
   </table>
</div>

var buttons = new Vue({
    el: '#moduleTable',
    data:  {
        modules:{{ $modules}}
    },
    methods: {
        toggleModule: function (moduleName,index) {
            var self = this;
               axios.post('url',{'name':moduleName})
               .then(response){
                   self.modules[index].enabled = false; // false true whatever
               }
        }
    }
});

Leave a comment