Я новичок в vue js.
У меня есть представление лезвия, которое возвращает список модулей, в одном из столбцов есть кнопка, которая будет включать или отключать модуль с помощью вызова ajax.
Я хотел бы использовать VUE js для этого.
Это то, что у меня есть
<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>
и это то, что у меня есть для моих js
var buttons = new Vue({
el: '#moduleTable',
data: {}
,
methods: {
toggleModule: function (moduleName) {
console.info(moduleName);
}
}
});
Но теперь я не уверен, что делать дальше (я понимаю, что нужно делать с помощью axios).
Я хочу иметь возможность переключать текст кнопки включения / выключения, так как мне получить ссылку на нажатую кнопку?
Также я правильно передаю значение модуля событию щелчка или есть лучший способ?



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


U может создать компонент Vue с именем '<module>', а затем использовать директиву и затем объединить лезвие foreach, чтобы сделать компонент '<module>' для каждого модуля, идентифицированного с v-key.
Пример:
@foreach($modules as $module)
<module v-key = "{{$module->id}}" name = "{{$module->name}}" is-enabled = "{{$module->enabled()}}">
@endforeach
Затем внутри компонента '<module>' вы можете использовать v-if из v-show для включения или отключения каждого компонента.
вот ссылка на документацию по условному рендерингу: https://vuejs.org/v2/guide/conditional.html
Надеюсь это поможет:
<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
}
}
}
});
Я думаю, вам нужно использовать массив v-for и modules в данных vue, если вы хотите изменить статус модуля при вызове ajax, чтобы вы могли изменять его динамически.