title: Vue.js - Buefy Modules (Radio btns/ Check Box)
body: <p>I'm practising back-end in Laravel, and for front-end I'm using Vue.js - Buefy Modules, and I have little problem with Radio and CheckBox.</p>
  
  <p>Here User should choose one of the two offered radio btns:</p>
  
  <pre><code>&lt;div class="block"&gt;
        &lt;b-radio-group v-model="permissionType"&gt;
            &lt;b-radio name="permission_type" value="basic"&gt;Basic Permission&lt;/b-radio&gt;
            &lt;b-radio name="permission_type" value="crud"&gt;CRUD Permission&lt;/b-radio&gt;
        &lt;/b-radio-group&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>If User click on first btun (Basic) there should appear 3 input fields:</p>
  
  <pre><code>&lt;div class="field" v-if="permissionType == 'basic'"&gt;
     &lt;label for="display_name" class="label"&gt;Name (Display Name)&lt;/label&gt;
     &lt;p class="control"&gt;
       &lt;input type="text" class="input" name="display_name" id="display_name"&gt;
     &lt;/p&gt;
  &lt;/div&gt;
  
        &lt;div class="field" v-if="permissionType == 'basic'"&gt;
          &lt;label for="name" class="label"&gt;Slug&lt;/label&gt;
          &lt;p class="control"&gt;
            &lt;input type="text" class="input" name="name" id="name"&gt;
          &lt;/p&gt;
        &lt;/div&gt;
  
        &lt;div class="field" v-if="permissionType == 'basic'"&gt;
          &lt;label for="description" class="label"&gt;Description&lt;/label&gt;
          &lt;p class="control"&gt;
            &lt;input type="text" class="input" name="description" id="description" placeholder="Describe what this permission does"&gt;
          &lt;/p&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p>If User click on second btn (CRUD) there should appear 1 input, 4 check box btns and table, but they do not appear.</p>
  
  <pre><code>&lt;div class="field" v-if="permissionType == 'crud'"&gt;
          &lt;label for="resource" class="label"&gt;Resource&lt;/label&gt;
          &lt;p class="control"&gt;
            &lt;input type="text" class="input" name="resource" id="resource" v-model="resource" placeholder="The name of the resource"&gt;
          &lt;/p&gt;
        &lt;/div&gt;
  
        &lt;div class="columns" v-if="permissionType == 'crud'"&gt;
          &lt;div class="column is-one-quarter"&gt;
            &lt;b-checkbox-group v-model="crudSelected"&gt;
              &lt;div class="field"&gt;
                &lt;b-checkbox custom-value="create"&gt;Create&lt;/b-checkbox&gt;
              &lt;/div&gt;
              &lt;div class="field"&gt;
                &lt;b-checkbox custom-value="read"&gt;Read&lt;/b-checkbox&gt;
              &lt;/div&gt;
              &lt;div class="field"&gt;
                &lt;b-checkbox custom-value="update"&gt;Update&lt;/b-checkbox&gt;
              &lt;/div&gt;
              &lt;div class="field"&gt;
                &lt;b-checkbox custom-value="delete"&gt;Delete&lt;/b-checkbox&gt;
              &lt;/div&gt;
            &lt;/b-checkbox-group&gt;
          &lt;/div&gt; &lt;!-- end of .column --&gt;
  
          &lt;input type="hidden" name="crud_selected" :value="crudSelected"&gt;
  
          &lt;div class="column"&gt;
            &lt;table class="table" v-if="resource.length &gt;= 3"&gt;
              &lt;thead&gt;
                &lt;th&gt;Name&lt;/th&gt;
                &lt;th&gt;Slug&lt;/th&gt;
                &lt;th&gt;Description&lt;/th&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                &lt;tr v-for="item in crudSelected"&gt;
                  &lt;td v-text="crudName(item)"&gt;&lt;/td&gt;
                  &lt;td v-text="crudSlug(item)"&gt;&lt;/td&gt;
                  &lt;td v-text="crudDescription(item)"&gt;&lt;/td&gt;
                &lt;/tr&gt;
              &lt;/tbody&gt;
            &lt;/table&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p>I've checked Buefy documentation and there were some updates, but when I change code, still not works..</p>
  
  <p>Here is script:</p>
  
  <pre><code>  &lt;script&gt;
          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);
              }
            }
          }); 
      &lt;/script&gt;
  </code></pre>
  
  <p>Here I place original code without changes, if someone could fix this, I would be grateful. Thanks!</p>