Vue.js 2.5 /Visual Studio editor de Código

Estoy consiguiendo de este es-la pelusa de advertencia, ¿cómo puedo deshacerme de él ?

    <template :slot="slotName" slot-scope="props" v-for="slotName in  $scopedSlots?Object.keys($scopedSlots):null">
       <slot :name="slotName" :row-data="props.rowData" :row-index="props.rowIndex" :row-field="props.rowField"></slot>
  </template>

He intentado añadir un índice, pero no resuelve este problema

<template :slot="slotName" slot-scope="props" v-for="(slotName, index) in  $scopedSlots?Object.keys($scopedSlots):null" :key="index">
  <slot :name="slotName" :row-data="props.rowData" :row-index="props.rowIndex" :row-field="props.rowField"></slot>
  </template>
  • Posiblemente el key en el slot elemento más que el template elemento?
  • gracias por tus comentarios… lo he probado, es-la pelusa de advertencia de desaparecer , pero git un error de compilación : – key no funciona en <ranura> debido a que las ranuras son abstractas tomas y, posiblemente, puede expandirse en varios elementos. Usar la clave de un elemento de ajuste en su lugar.
  • puede que la respuesta como una respuesta … voy a votar por ella… me pueden agregar :clave de la vinculación en una <div> envoltorio !
InformationsquelleAutor | 2017-12-02

6 Comentarios

  1. 20

    La pregunta es la respuesta, pero me gustaría añadir un ejemplo y un enlace a la documentación:

    Esta estructura hace que el dijo de error:

    <div v-for="(item, index) in items">
        {{index}}. {{item.name}}
    </div>
    

    Se puede solucionar cambiando la sintaxis como esta:

    <div v-for="(item, index) in items" :key="item.id">
        {{index}}. {{item.name}}
    </div>
    

    Si sus elementos no tienen ningún campo identificador exclusivo sólo se pueden escribir :key="item".
    Sin embargo, por razones de rendimiento los datos que debe tener un campo de id.

    https://vuejs.org/v2/guide/list.html#key

  2. 12

    Puede ignorar la advertencia. Se trata de la eslint plugin para vue, y fue un error, arreglé hace un mes pero tal vez vetur todavía está utilizando la versión anterior del plugin.

    El atributo de clave tiene que ser añadido a los contenidos que pasan a su componente

    • gracias por los comentarios… me puede ignorar, pero también puede agregar la :clave de enlace dentro de un elemento de ajuste en la ranura
    • Sí, usted puede :), es más fácil si usted sabe cómo extraer un key a partir de los datos. Pero si el componente es el procesamiento de datos arbitrarios, que no tiene más remedio que dejar que el usuario de su componente de proporcionar esa información (por ejemplo: una virtual scroller)
    • gracias .. si no hay ninguna tecla en los datos, me puede agregar índice y el uso… funciona muy bien también
    • No es una buena idea utilizar el índice de la clave, que es el comportamiento por defecto cuando no key se proporciona
    • Divertido, he actualizado mi eslint-plugin-vue a la 5.0.0-beta.1 (la revisión de la versión) y se informa como un error, en lugar de sólo una advertencia.
    • Sí, yo tenía a la recta que añadir la :key directiva. Puede ser debido a que me nodo en ejecución v10 aunque.

  3. 2

    este trabajo para mí

    <div :class="sliderClass()" v-for="(slide,index) in slides" :key="index">
    <div :class="sliderClass()" v-for="slide in slides" :key="slide.SliderID">
    
  4. 1
    <li class="list-group-item" v-for="server in Servers" v-bind:key="server">    
    

    Especificar la clave única en la etiqueta como esta.

  5. 1

    Veamos un ejemplo sencillo aquí!

    Estoy construyendo una Lista De tareas de la Aplicación. Así que voy a construir un componente llamado Todo y dentro de mi TodoList componente voy a llamar a Todo componente como este

        <todo v-for="todo in todos" v-bind:key="todo" v-bind:todo="todo"></todo>
    

    Espero que ayude!

  6. 0

    Supongamos que se está iterando sobre una matriz denominada usuarios, entonces usted puede hacer algo como esto:

    <div v-for="(user,id) in users" :key="id" >
          <div class="card" >
           ...........................
          </div>
    </div>
    

Dejar respuesta

Please enter your comment!
Please enter your name here