Vue.js - Buefy Modules (Radio btns/ Check Box)

Question

我在 Laravel 中练习后端，对于前端，我使用 Vue.js - Buefy Modules，我对收音机和复选框几乎没有问题。

在这里，用户应该选择两个提供的无线电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(基本(，则应该出现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>

我已经检查了Buepy文档，并且有一些更新，但是当我更改代码时，仍然不起作用。

这是脚本：

<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>

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

Answer 1

您忘记将 V 模型添加到您的无线电组，请尝试此操作，它应该可以工作

<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>