Vue.js - Buefy 模块（无线电 btns/复选框）答案

【问题标题】：Vue.js - Buefy Modules (Radio btns/ Check Box)Vue.js - Buefy 模块（无线电 btns/复选框）
【发布时间】：2018-10-17 09:06:46
【问题描述】：

我在 Laravel 中练习后端，而对于前端我使用的是 Vue.js - Buefy 模块，而且我对 Radio 和 CheckBox 的问题不大。

这里用户应该选择两个提供的无线电 btns 之一：

<div class="block">
      <b-radio-group v-model="permissionType">
          <b-radio name="permission_type" value="basic">Basic Permission</b-radio>
          <b-radio name="permission_type" value="crud">CRUD Permission</b-radio>
      </b-radio-group>
  </div>

如果用户点击第一个 btun (Basic)，应该会出现 3 个输入字段：

<div class="field" v-if="permissionType == 'basic'">
   <label for="display_name" class="label">Name (Display Name)</label>
   <p class="control">
     <input type="text" class="input" name="display_name" id="display_name">
   </p>
</div>

      <div class="field" v-if="permissionType == 'basic'">
        <label for="name" class="label">Slug</label>
        <p class="control">
          <input type="text" class="input" name="name" id="name">
        </p>
      </div>

      <div class="field" v-if="permissionType == 'basic'">
        <label for="description" class="label">Description</label>
        <p class="control">
          <input type="text" class="input" name="description" id="description" placeholder="Describe what this permission does">
        </p>
      </div>

如果用户点击第二个 btn (CRUD)，应该会出现 1 个输入、4 个复选框 btns 和表格，但它们没有出现。

<div class="field" v-if="permissionType == 'crud'">
        <label for="resource" class="label">Resource</label>
        <p class="control">
          <input type="text" class="input" name="resource" id="resource" v-model="resource" placeholder="The name of the resource">
        </p>
      </div>

      <div class="columns" v-if="permissionType == 'crud'">
        <div class="column is-one-quarter">
          <b-checkbox-group v-model="crudSelected">
            <div class="field">
              <b-checkbox custom-value="create">Create</b-checkbox>
            </div>
            <div class="field">
              <b-checkbox custom-value="read">Read</b-checkbox>
            </div>
            <div class="field">
              <b-checkbox custom-value="update">Update</b-checkbox>
            </div>
            <div class="field">
              <b-checkbox custom-value="delete">Delete</b-checkbox>
            </div>
          </b-checkbox-group>
        </div> <!-- end of .column -->

        <input type="hidden" name="crud_selected" :value="crudSelected">

        <div class="column">
          <table class="table" v-if="resource.length >= 3">
            <thead>
              <th>Name</th>
              <th>Slug</th>
              <th>Description</th>
            </thead>
            <tbody>
              <tr v-for="item in crudSelected">
                <td v-text="crudName(item)"></td>
                <td v-text="crudSlug(item)"></td>
                <td v-text="crudDescription(item)"></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

我已经检查了 Buefy 文档并且有一些更新，但是当我更改代码时，仍然无法正常工作..

这是脚本：

  <script>
        var app = new Vue({
          el: '#app',
          data: {
            permissionType: 'basic',
            resource: '',
            crudSelected: ['create', 'read', 'update', 'delete']
          },
          methods: {
            crudName: function(item) {
              return item.substr(0,1).toUpperCase() + item.substr(1) + " " + app.resource.substr(0,1).toUpperCase() + app.resource.substr(1);
            },
            crudSlug: function(item) {
              return item.toLowerCase() + "-" + app.resource.toLowerCase();
            },
            crudDescription: function(item) {
              return "Allow a User to " + item.toUpperCase() + " a " + app.resource.substr(0,1).toUpperCase() + app.resource.substr(1);
            }
          }
        }); 
    </script>

我在这里放置原始代码而不做任何更改，如果有人可以解决这个问题，我将不胜感激。谢谢！

【问题讨论】：

标签： laravel vue.js vuejs2 vue-component laravel-5.6

【解决方案1】：

您忘记将 v-model 添加到您的无线电组，试试这个，它应该可以工作

<div class="block">
  <b-radio-group v-model="permissionType">
      <b-radio v-model="permissionType" name="permission_type" native-value="basic">Basic Permission</b-radio>
      <b-radio v-model="permissionType" name="permission_type" native-value="crud">CRUD Permission</b-radio>
  </b-radio-group>

【讨论】：