Используйте vue, чтобы включить отключение записи в шаблоне лезвия

Я новичок в 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).

Я хочу иметь возможность переключать текст кнопки включения / выключения, так как мне получить ссылку на нажатую кнопку?

Также я правильно передаю значение модуля событию щелчка или есть лучший способ?

Я думаю, вам нужно использовать массив v-for и modules в данных vue, если вы хотите изменить статус модуля при вызове ajax, чтобы вы могли изменять его динамически.

Neha 20.07.2018 14:02
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
1
289
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

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
               }
        }
    }
});

Другие вопросы по теме