Just starting out with vue js and looking for some guidance.
I have a blade view that displays a list of modules, each with a button to enable or disable the module using an ajax call.
I want to achieve this functionality using VUE JS.
Here is my current setup:
<div class="content">
<table id="moduleTable">
<tr>
<th>Module Name</th>
<th>Status</th>
<th>Update</th>
</tr>
@foreach($modules as $module)
<tr>
<td >{{$module->name}}</td>
@if($module->enabled())
<td>Enabled</td>
<td><button @click="toggleModule('{{$module->name}}')" >Disable</button></td>
@else
<td>Disabled</td>
<td><button @click="toggleModule('{{$module->name}}')">Enable</button></td>
@endif
</tr>
@endforeach
</table>
</div>
Below is the js code I have so far:
var buttons = new Vue({
el: '#moduleTable',
data: {}
,
methods: {
toggleModule: function (moduleName) {
console.log(moduleName);
}
}
});
Now I'm unsure about what steps to take next (I do understand the axios part for making the call).
I would like to change the text of the enabling/disabling button when clicked. How can I reference the specific button that was clicked?
Also, am I passing the module value correctly to the click event or is there a better way to handle this?