1

Estoy realizando un proyecto en y tengo dos situaciones. La primera es que estoy generando una lista (que se repite dos veces) mediante un v-for, que funciona correctamente, pero en la consola me da el siguiente error:

[Vue warn]: You may have an infinite update loop in a component render function.

Entiendo que el error tiene que ver con algo que estoy haciendo mal en el bucle.

El otro problema es que quiero mostrar un menú con v-show, pero por algún motivo no está funcionando, y creo que están todas las cosas en su lugar. Quizás tenga que ver con el primer problema.

HTML

<template>
  <header>
    <div>

      <div class="right-content">

        <ul>
          <li v-for="topMenuLink in topMenuLinks" :key="topMenuLink">
            <a :href="topMenuLink.url">{{topMenuLink.text}}</a>
          </li>
        </ul>

        <div class="menu">
          <a href="javascript:void(0);" class="menu-button" :click="showMenu = !showMenu">Menu</a>
        </div>
      </div>
    </div>
    <ul class="dropdown-menu" v-show="showMenu">
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
      <li v-for="topMenuLink in topMenuLinks" :key="topMenuLink"><a :href="topMenuLink.url">{{topMenuLink.text}}</a></li>
    </ul>
  </header>
</template>

Vue.js

  export default {
    data() {
      return {
        showMenu: false,
        topMenuLinks: [
          {
            text: 'Texto 1',
            url: ''
          },
          {
            text: 'Texto 2',
            url: ''
          },
          {
            text: 'Texto 3',
            url: ''
          },
          {
            text: 'Texto 4',
            url: ''
          }
        ]
      }
    }
  }

1 respuesta 1

2

Primero que todo, te recomiendo tener un identificador(id) en el :key del ciclo. Modifique la propieded data() para que quedara de esta manera:

data() {
  return {
    showMenu: false,
    topMenuLinks: [
      {
        id: 1,
        text: 'Texto 1',
        url: ''
      },
      {
        id: 2,
        text: 'Texto 2',
        url: ''
      },
      {
        id: 3,
        text: 'Texto 3',
        url: ''
      },
      {
        id: 4,
        text: 'Texto 4',
        url: ''
      }
    ]
  }
}

El mayor cambio fue en el evento click, paso de ser :click a v-on:click El nuevo HTML sería este:

<header>
<div>
  <div class="right-content">

    <ul>
      <li v-for="topMenuLink in topMenuLinks" :key="topMenuLink.id">
        <a :href="topMenuLink.url">{{topMenuLink.text}}</a>
      </li>
    </ul>

    <div class="menu">
      <a href="javascript:void(0);" class="menu-button" v-on:click="showMenu=!showMenu">Menu</a>
    </div>
  </div>
</div>
<ul class="dropdown-menu" v-show="showMenu" >
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li v-for="topMenuLink in topMenuLinks" :key="topMenuLink.id">
    <a :href="topMenuLink.url">{{topMenuLink.text}}</a>
  </li>
</ul>

Te dejo un ejemplo del código funcionando. https://stackblitz.com/edit/vue-v-model?file=index.html

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.