es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

API de composición de Vue 3, representación condicional.

22 Jul, 2023 Programación

Tengo un botón que necesita cambiar su icono cuando se hace clic para alternar entre reproducir y pausar.

Aquí tienes un ejemplo minimalista del código:

<template>

<pre><code><div @click="toggleF">
    <i v-if="toggleForce == true" class="fas fa-pause"></i>
    <i v-if="toggleForce == false" class="fas fa-play"></i>
</div>
</code></pre>

</template>

<script>
    import {onMounted, onBeforeMount, ref} from 'vue'

<pre><code>export default {
    setup(){
        const toggleForce = ref(false)

        function toggleF () {
           toggleForce.value = !toggleForce.value
        };

    return {toggleF,toggleForce}
    }
}
</code></pre>

</script>

Recibo la siguiente advertencia/error:
Imagen

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El problema en el código es que hay un error tipográfico en el nombre de la clase para el ícono de reproducción. En lugar de “fas fa-play”, está escrito como “fas fa-pay”. Para solucionar este error, simplemente cambie el nombre de la clase a “fas fa-play”.

    Aquí está el código corregido:

    <template>
    <div @click="toggleF">
        <i v-if="toggleForce == true" class="fas fa-pause"></i>
        <i v-if="toggleForce == false" class="fas fa-play"></i>
    </div>
</template>

<script>
    import {onMounted, onBeforeMount, ref} from 'vue'

    export default {
        setup(){
            const toggleForce = ref(false)

            function toggleF () {
               toggleForce.value = !toggleForce.value
            };

        return {toggleF,toggleForce}
        }
    }
</script>

Comments are closed.