Diskusi Jody Kalim

Selesai
Jody Kalim
Ditanyakan pada: Memuat Data pada Toggle Element

Masalah dropdown

izin bertanya, saya sudah coba ikutin sesuai tutorial , tetapi kenapa dropdown nya pas di tekan, tidak bisa respon ya? mohon penjelasannya. Terima Kasih

SC : <body>

<button class="btn btn-sm btn-outline-success" @click="style.sliderStatus = !style.sliderStatus"> </button>
<button class="btn btn-success btn-sm dropdown-toggle" id="dropdownCart" data-bs-toggle="'dropdown" aria-expanded="false" > cart : {{cart.length}} </button>
{{item.qty}} {{item.name}} {{item.price | currencyFormat }} 

    </div>
  </nav>
  <br>
  <h1>My shop</h1>
  <transition name="custom" enter-active-class="animate__animated animate__fadeInDown" leave-active-class="animate__animated animate__slideOutRight">
    <div v-if="style.sliderStatus">
      <div class="align-items-center" class="sliderState">
        <label class="style.label">Max</label>
        &lt;input type="number" class="form-control mx-2" :style="{'width' : '60px','text-align':'center'}" v-model="maximum"&gt;
        &lt;input type="range" class="custom" min="0" max="200" v-model="maximum"&gt;
      </div>
    </div>
  </transition>
  
  <transition name="fade" tag="div" beforeEnter="before" enter="enter" leave="leave">
    <div class="row d-none mb-3 align-items-center" v-for="(item, index) in products" key="item.id" v-if="item.price <= Number(maximum)" data-index="index">
        <div class="col-1 m-auto">
            &lt;button class="btn btn-info" v-on:click="addItem(item)"&gt;+&lt;/button&gt;
        </div>
        <div class="col-sm-4">
            <img src="item.image" class="img-fluid d-block">
        </div>
        <div class="col">
            <h3 class="text-info">{{item.name}}</h3>
            <p class="mb-0">{{item.description}}</p>
            <div class="h5 float-right">{{item.price | currencyFormat }}</div>
        </div>
    </div>
  </transition> 
</div>
[removed][removed]
[removed][removed]
[removed][removed]
[removed][removed]

</body>

2 Jawaban

Avatar
Muhammad Fakhry Burhanuddin

2 tahun yang lalu

Hi Jody,

Silahkan kopi paste kodenya di pastebin.com agar lebih enak dilihat.

Kalau di sini agak berantakan.

Jody Kalim

Link : https://pastebin.com/embed_js/0Gr06cwK

Muhammad Fakhry Burhanuddin

Ganti versi bootstrapnya ke v4.4.1 seperti yang ada di course ini. Untuk templatenya bisa lihat di https://getbootstrap.com/docs/4.4/getting-started/introduction/

Avatar
BroKoding

2 tahun yang lalu

Halo kak,

Untuk versi bootstrap yang digunakan apakah sudah sama dengan materi? Yakni menggunakan bootstrap versi 4.4, dilihat dari code yang dilampirkan seperti menggunakan bootstrap 5.

Sepertinya ada typo di bagian data-bs-toggle yakni data-bs-toggle="bootstrap".

Jody Kalim

Saya menggunakkan bootstrap terbaru , jadi saya sesuaikan dengan dokumentasi bootstrap terbarunya ka, apakah ada solusinya agar permasalah dropdown bisa teratasi? Terima Kasih

Jody Kalim

pada saat di bagian data-bs-toggle="'dropdown" ,saya juga sudah koreksi menjadi data-bs-toggle="dropdown" tetapi masih tetap tidak bisa di jalankan dropdown nya , mohon panduannya ka

BroKoding

Sebenarnya direkomendasikan menggunakan versi bootstrap yang serupa, karena yang ditakutkan seperti ini terjadi. Akan saya bantu besok ya, saat ini belum ada waktu untuk testing. Bisa lampirkan 1 repository nya ya, besok saya coba test. Reply diskusi ini untuk menambahkan notifikasi ke saya :D

Jody Kalim

ini link untuk detail source code nya : https://pastebin.com/embed_js/EPzSTd95 Terima Kasih ka

BroKoding

Bagian dropdownnya perlu dibungkus dengan div yang diberi class dropdown.

Jody Kalim

sudah bisa ka , Terima Kasih