Programim dhe zhvillim, javascript, python, php, html

Vue.js - Modulet Buefy (Radio btns/ Kutia e kontrollit)

Unë jam duke praktikuar back-end në Laravel, dhe për front-end po përdor Vue.js - Buefy Modules, dhe kam pak probleme me Radion dhe CheckBox.

Këtu Përdoruesi duhet të zgjedhë një nga dy btns radio të ofruara:

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

Nëse përdoruesi klikon në btun e parë (Basic) duhet të shfaqen 3 fusha hyrëse:

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

Nëse Përdoruesi klikon në btn-në e dytë (CRUD) duhet të shfaqet 1 hyrje, 4 kuti kontrolloni btns dhe tabelë, por ato nuk shfaqen.

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

Kam kontrolluar dokumentacionin e Buefy dhe ka pasur disa përditësime, por kur ndryshoj kodin, ende nuk funksionon..

Këtu është skenari:

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

Këtu vendos kodin origjinal pa ndryshime, nëse dikush mund ta rregullonte këtë, do të isha mirënjohës. Faleminderit!


Përgjigjet:


1

ju harroni të shtoni modelin v në grupin tuaj të radios, provojeni këtë dhe do të funksionojë

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

16.06.2018
Materiale të reja

Masterclass Coroutines: Kapitulli-3: Anulimi i korutinave dhe trajtimi i përjashtimeve.
Mirë se vini në udhëzuesin gjithëpërfshirës mbi Kotlin Coroutines! Në këtë seri artikujsh, unë do t'ju çoj në një udhëtim magjepsës, duke filluar nga bazat dhe gradualisht duke u thelluar në..

Faketojeni derisa ta arrini me të dhënat false
A e gjeni ndonjëherë veten duke ndërtuar një aplikacion të ri dhe keni nevojë për të dhëna testimi që duken dhe duken më realiste ose një grup i madh të dhënash për performancën e ngarkesës...

Si të përdorni kërkesën API në Python
Kërkesë API në GitHub për të marrë depot e përdoruesve duke përdorur Python. Në këtë artikull, unë shpjegoj procesin hap pas hapi për të trajtuar një kërkesë API për të marrë të dhëna nga..

Një udhëzues hap pas hapi për të zotëruar React
Në këtë artikull, do të mësoni se si të krijoni aplikacionin React, do të mësoni se si funksionon React dhe konceptet thelbësore që duhet të dini për të ndërtuar aplikacione React. Learning..

AI dhe Psikologjia — Pjesa 2
Në pjesën 2 të serisë sonë të AI dhe Psikologji ne diskutojmë se si makineritë mbledhin dhe përpunojnë të dhëna për të mësuar emocione dhe ndjenja të ndryshme në mendjen e njeriut, duke ndihmuar..

Esencialet e punës ditore të kodit tim VS
Shtesat e mia të preferuara - Git Graph 💹 Kjo shtesë është vërtet e mahnitshme, e përdor përpara se të filloj të punoj për të kontrolluar dy herë ndryshimet dhe degët më të fundit, mund të..

Pse Python? Zbulimi i fuqisë së gjithanshme të një gjiganti programues
Në peizazhin gjithnjë në zhvillim të gjuhëve të programimit, Python është shfaqur si një forcë dominuese. Rritja e tij meteorike nuk është rastësi. Joshja e Python qëndron në thjeshtësinë,..