Switch afeta os checkbox da p�gina Vue/tailwind

29/12/2022

Estou fazendo uma aplica��o web usando vue e tailwind. Na p�gina que o problema est� ocorrendo ao mudar o status de um bot�o switch, todos os campos checkbox da p�gina s�o marcados. Ele n�o t� relacionado ao checkbox de nenhuma forma, nem com id, nem name, nem v-model.

<Switch name="switch1" v-model="enabled" :class="[enabled ? 'bg-indigo-600' : 'bg-gray-200', 'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500']">
  <span class="sr-only">Use setting</span>
  <span aria-hidden="true" :class="[enabled ? 'translate-x-5' : 'translate-x-0', 'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200']" />
</Switch>

Mateus

Curtir t�pico + 0

Responder

Post mais votado

29/12/2022

O componente Switch da p�gina Vue/tailwind est� afetando os checkbox da p�gina porque ele est� sendo usado como um substituto de um checkbox. O componente Switch � um componente de interface de usu�rio que � usado para ativar ou desativar uma op��o em um aplicativo. Ele � muito semelhante a um checkbox, mas � apresentado de forma diferente e geralmente � usado para op��es que s�o ativadas ou desativadas com mais frequ�ncia.

O componente Switch est� sendo usado com a diretiva v-model, que � usada para vincular um elemento de entrada a uma propriedade do componente Vue. Quando o componente Switch � ativado ou desativado, o valor da propriedade enabled � alterado e isso afeta os checkbox da p�gina.

O componente Switch tamb�m est� sendo estilizado com a classe "bg-indigo-600" quando est� ativado e com a classe "bg-gray-200" quando est� desativado. Isso faz com que o componente mude de cor quando � ativado ou desativado, o que tamb�m pode afetar os checkbox da p�gina de acordo com a forma como eles s�o estilizados.

Herbert

Responder

Gostei + 1