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.

¿Por qué timeAgo está devolviendo null?

23 Jul, 2023 Programación

Estoy tratando de obtener el tiempo de actualización de manera iterativa cada vez que se abre el menú desplegable, pero me está devolviendo null. ¿Cómo puedo asegurarme de que el evento onchange se active correctamente?

Esto es lo que he intentado hasta ahora:

<x-nav-dropdown :text="$notificationIcon" :title="text('nav<em>notifications')" dropdownClass="notifications-dropdown" align="right"> 
  @forelse(Auth::user()->notifications as $notification)
  <x-dropdown-item :route="$notification->data['link']" :title="text($notification->data['link</em>title'])" onchange="getTime()" x-data="{timeAgo : 'null', getTime() {this.timeAgo = moment('{{ $notification->created<em>at->format('c') }}').locale('{{ str</em>replace('<em>', '-', cur</em>lang()->slug) }}').fromNow();} }" >
    <span style="display: inline-block;">{{ text($notification->data['subject']) }}</span>
    <time style="float: right;" x-text= timeAgo> </time>

<pre><code></span>

<br/>
<small>{{ array_key_exists('data', $notification->data) && !empty($notification->data['data']) ? new \Illuminate\Support\HtmlString(vsprintf(text($notification->data['message']), $notification->data['data'])) : text($notification->data['message']) }}</small>
</code></pre>

</x-dropdown-item>
  @empty
  <x-dropdown-item route="#" :title="text('notifications<em>none')">
    {{ text('notifications</em>none') }}
  </x-dropdown-item>
  @endforelse
</x-nav-dropdown>

Por ejemplo, el resultado deseado debería ser:


"x" minutos atrás

¿Lo estoy haciendo bien? ¿Puedo llamar al evento onchange en las etiquetas de Bootstrap? ¿Algún tipo de ayuda en la dirección correcta?

¡Gracias de antemano!

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para asegurarse de que se active correctamente el evento onchange, es necesario asegurarse de que el elemento desplegable tenga una propiedad o atributo onchange válido. En el fragmento de código proporcionado, parece que el atributo onchange está configurado para ejecutar la función getTime(), pero no está claro dónde se define esta función.

    Para obtener la hora actualizada de forma iterativa cada vez que se abre el desplegable, puedes utilizar el evento @shown.bs.dropdown proporcionado por el plugin de desplegables de Bootstrap. Este evento se dispara cuando el desplegable está completamente abierto (después de que las transiciones CSS hayan finalizado). Puedes agregar un “event listener” a este evento y llamar a la función getTime() dentro de él para actualizar la hora que se muestra.

    Así es cómo puedes modificar el código para lograr esto:

    <x-nav-dropdown :text="$notificationIcon" :title="text('nav_notifications')" dropdownclass="notifications-dropdown" align="right">
  @forelse(Auth::user()->notifications as $notification)
  <x-dropdown-item :route="$notification->data['link']" :title="text($notification->data['link_title'])" x-init="getTime()" x-data="{timeAgo: null, getTime() {this.timeAgo = moment('{{ $notification->created_at->format('c') }}').locale('{{ str_replace('_', '-', cur_lang()->slug) }}').fromNow();}}" @shown.bs.dropdown="getTime()">
    <span style="display: inline-block;">{{ text($notification->data['subject']) }}</span>
    <time style="float: right;" x-text="timeAgo"></time>
    <br>
    <small>{{ array_key_exists('data', $notification->data) && !empty($notification->data['data']) ? new \Illuminate\Support\HtmlString(vsprintf(text($notification->data['message']), $notification->data['data'])) : text($notification->data['message']) }}</small>
  </x-dropdown-item>
  @empty
  <x-dropdown-item route="#" :title="text('notifications_none')">
    {{ text('notifications_none') }}
  </x-dropdown-item>
  @endforelse
</x-nav-dropdown>

    En este código modificado, se agregó el atributo x-init al elemento x-dropdown-item para llamar a la función getTime() cuando el elemento se inicializa. También se agregó un “event listener” al evento @shown.bs.dropdown utilizando la directiva abreviada @ para llamar a la función getTime() nuevamente cada vez que el desplegable está completamente abierto.

    También se movió el atributo x-data al elemento x-dropdown-item para encapsular las propiedades timeAgo y getTime() y la función dentro del ámbito del elemento. De esta manera, podemos actualizar directamente la propiedad timeAgo desde la función getTime().

    Ten en cuenta que también se eliminó el atributo onchange ya que no es necesario para esta funcionalidad.

Comments are closed.