Question

我是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可以拨打电话）。

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

我也可以将模块值正确传递给click事件，还是有更好的方法？

Answer 1

U可以先创建一个名为if(typeof require !== 'undefined') XLSX = require('C:\\Program Files\\nodejs\\node_modules\\npm\\node_modules\\xlsx'); var workbook = XLSX.readFile('xlsm'); var first_sheet_name = workbook.SheetNames[0]; var address_of_cell = 'D5'; var worksheet = workbook.Sheets[first_sheet_name]; var desired_cell = worksheet[address_of_cell]; desired_value = (desired_cell ? desired_cell.v : undefined); console.log('Cell Value is: '+ desired_value);的Vue组件，然后再使用该指令，然后将Blade foreach组合在一起，以组成一个'<module>'所标识的'<module>' foreach模块。

示例：

v-key

然后您可以在@foreach($modules as $module) <module v-key="{{$module->id}}" name="{{$module->name}}" is-enabled="{{$module->enabled()}}"> @endforeach组件内部使用'<module>'的{{1}}来启用或禁用每个组件。

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

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

使用vue启用刀片模板中的禁用记录

2 个答案: