Início / coding / Perguntas / 79198095
Accepted
volume one
Asked: 2024-11-18 04:29:12 +0800 CST

Como aplicar dinamicamente uma classe a um componente filho?

  • 772

Tenho um componente filho dentro de um componente pai. Sempre que o componente filho é clicado, preciso aplicar uma classe chamada .selecteda ele.

Pai.vue

<template>
   <ol>
    <li v-for="(Contact, index) in Contacts">
      <Component-Contact :ref="(el) => { RefContacts[index] = el}" @click="onClick(RefContacts[index])" :Contact="Contact" @Selected="(Data) => onSelected(Data)"/>
     </li>
   </ol>

</template>
<script>
import ComponentContact from '../components/Contact.vue'
....
setup() {
const RefContacts = ref([]);

function onSelected(Contact){
  //Adds data received from child component to an array
}

onClick(el) {
 el.toggleClass('selected') // Returns error saying toggleClass is not a function!!
}

 const Contacts = ref();
 onMounted(() => {
    const Result = await axios.get(`/api/contacts`);
    Contacts.value = Result.data
}
 )

return {
  Contacts, // An array of contacts from the DB
  onSelected
}
}
</script>

Componente filho Contact.vue

<template>
 <div style="cursor: pointer" @click="onClick($el, Contact)">
  <p>{{Contact.Forename}}</p>
  <p>{{Contact.Surname}}</p>
 </div>
</template>
<script>
...
props: {
  Contact: {
    type: Object,
    required: true
   },
emits: 'Selected',
setup() {

  function onClick(el, Contact) {
   el.toggleClass('selected') // This works but I don't want to set it here in the child
   return context.emit('Selected', {
   FullName: Contact.forename + ' ' + Contact.surname
   }
 }

}
</script>

Como posso fazer o Vue aplicar a classe de .selecteddentro <Child-Component />da Parent.vueview? Quero defini-la no Parent (ou onde quer que esteja sendo usada) e então remover a classe quando o usuário terminar de fazer o que está fazendo. Sinto que isso é mais flexível do que defini-la dentro do componente filho.

vue.js

1 respostas

  1. Best Answer

    Evite a manipulação do DOM o máximo possível.
    Em vez de aplicar a classe você mesmo, deixe o Vue fazer isso:

    <my-component :class="{ selected: /* condition here */ }" />

    Veja Ligações de classe e estilo .

    Exemplo básico, onde apenas um item pode ser selecionado (selecionar outro desmarca o anterior):

    const { createApp, ref } = Vue

const app = createApp({
  setup() {
    const selected = ref(null)
    return {
      selected,
      select: (index) =>
        (selected.value = selected.value === index ? null : index)
    }
  }
}).mount('#app')
    li {
  cursor: pointer;
}
li:hover {
  background-color: #f5f5f5;
}
.selected {
  color: red;
}
#app {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.5.4/vue.global.prod.min.js"></script>
<div id="app">
  <ul>
    <li
      v-for="(_, index) in 6"
      @click="() => select(index)"
      :class="{ selected: index === selected }"
      v-text="'item'"
    />
  </ul>
  <pre v-text="JSON.stringify({ selected }, null, 2)" />
</div>

    E aqui está um onde você pode selecionar itens individualmente:

    const { createApp, ref } = Vue

const app = createApp({
  setup() {
    const items = ref(
      Array.from({ length: 7 }).map(() => ({ selected: false }))
    )
    return {
      items,
      toggle: (index) =>
        items.value.splice(index, 1, { selected: !items.value[index].selected })
    }
  }
}).mount('#app')
    li {
  cursor: pointer;
}
li:hover {
  background-color: #f5f5f5;
}
.selected {
  color: red;
}
#app {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.5.4/vue.global.prod.min.js"></script>
<div id="app">
  <ul>
    <li
      v-for="({ selected }, index) in items"
      @click="() => toggle(index)"
      :class="{ selected }"
      v-text="'item'"
    />
  </ul>
  <pre v-text="JSON.stringify( { items }, null, 2)" />
</div>

    Em cada caso, estou mantendo um estado local mínimo (no pai). Quando o estado é modificado, o Vue atualiza o template.

    • 1

relate perguntas