使用 vue 在刀片模板中启用禁用记录答案

【问题标题】：use vue to enable disable record in blade template使用 vue 在刀片模板中启用禁用记录
【发布时间】：2018-07-20 10:04:31
【问题描述】：

我是 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.log(moduleName);
        }
    }
});

但现在我不确定下一步该做什么（我了解 axios 位来进行调用）。

我希望能够切换按钮启用/禁用的文本，那么如何获取对已单击按钮的引用？

我也是将模块值正确传递给点击事件还是有更好的方法？

【问题讨论】：

如果你想在 ajax 调用中改变模块状态，我认为你必须在 vue 数据中使用 v-for 和 modules 数组，这样你就可以动态地改变它。

标签： javascript laravel laravel-5 vue.js

【解决方案1】：

你可以制作一个名为'<module>'的Vue组件，然后使用该指令，然后结合刀片foreach来制作一个'<module>'组件，foreach模块用v-key标识。

例子：

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

然后在'<module>' 组件中，您可以使用v-show 的v-if 来启用或禁用每个组件。

这里是条件渲染文档的链接： https://vuejs.org/v2/guide/conditional.html

【讨论】：

【解决方案2】：

希望这会有所帮助：

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

【讨论】：