Inilah templat tempat tombol dan contactList1 saya berada: -

<template>
    <div class="chat-app">
    <button v-on:click="displayList1()">Contacts List 1</button>  //Button
        <Conversation :contact="selectedContact" :messages="messages" @new="saveNewMessage" v-bind:class="{conversation:conversation}" />
        <ContactsList :contacts="contacts" @selected="startConversationWith" v-bind:class="{contactsList1:contactsList1}"/>  //contactsList
       </div>
</template>

Objek secara default disetel ke false

 data() {
            return {
                
                contactsList1: {
                    default: false,
                },
              
        },

Metode:-

displayList1()
        {
            this.contactsList1 = false;

        },

Gaya:-

<style lang="scss" scoped>
.chat-app {
    display: flex;
}
.contactsList1 {
    background-color: black;
   
}
</style>

Bahkan setelah objek menjadi false css diterapkan, adakah yang bisa memberi tahu saya apa yang salah. Saya baru pemula, mohon bantuannya.

0
Kakashi Hatake 20 November 2020, 18:02

1 menjawab

Jawaban Terbaik

Fungsi data Anda mengembalikan objek contactsList1 dan jalur lengkap untuk memeriksa jenis datanya adalah this.contactsList1.default

Anda juga harus memberi nama variabel Anda secara berbeda.

Jadi, inilah contoh dasar tentang cara mengikat tipe data Boolean ke kelas komponen Anda:

new Vue({
  el: "#app",
  data() {
    return {
      firstClass: {
        status: false
      }
    }
  },
  methods: {
    changeColour() {
      this.firstClass.status = true
    }
  }
  })
.styleFirstClass {
  background: red
}
.itemBox {
  padding:30px;
  margin:30px;
  border: 1px solid #444;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button @click="changeColour()">Click to bind class</button>

  <div class="itemBox" :class="{styleFirstClass: firstClass.status}">
  This is some text
  </div>
  
</div>
1
procoib 20 November 2020, 16:12