vue.js - style - vue keep alive

Vuejs calculated properties y jquery ui sortable issue

Question

En mi proyecto, tengo un componente con tres listas ul . También tengo algún tipo de matriz de datos con elementos, cada elemento tiene algunas propiedades. Mi objetivo es:

1. Distribuye elementos en una matriz básica en tres listas
2. Permite arrastrar y soltar elementos entre listas y actualizar los datos de los elementos, ya que cada elemento tiene una propiedad que nos dice a qué lista pertenece el artículo.

En lugar de copiar y pegar mucho código, traté de reproducir el comportamiento incorrecto en jsfiddle usando un ejemplo simple aquí:

https://jsfiddle.net/89pL26d2/4/

La cosa es que cuando arrastra y suelta, obtiene exactamente 2 elementos arrastrados, en lugar de uno.

Sin embargo, cuando cambié de propiedades calculadas para watch , obtuve el comportamiento deseado y todo funcionó bien.

Me imagino cuál es la línea que causa el error: la línea cuando actualizo la propiedad del elemento y me dice a qué lista debe pertenecer el artículo una vez que finaliza el arrastre. Pero no puedo entender por qué causa esto

Sé que no es la mejor manera de trabajar con HTML directamente, pero estoy de acuerdo con eso por ahora.

Answer 1

Generalmente, cada vez que veo un problema en Vue, especialmente relacionado con listas, donde se actualiza el artículo incorrecto o algo así, todo se reduce a que Vue intente ser inteligente pero se equivoque porque no tiene la mejor información. Esto casi siempre se resuelve mediante el uso de una key .

Se recomienda proporcionar una clave con v-for siempre que sea posible, a menos que el contenido de DOM iterado sea simple, o si está confiando intencionalmente en el comportamiento predeterminado para el aumento del rendimiento.

Clave

<div id="app">
  <div>
    <ul id="listA" data-list="A" class="connectedSortable">
      <li v-for="item in listAFiltered" :key="item.id" :data-id="item.id">{{ item.title }}</li>
    </ul>

    <ul id="listB" data-list="B" class="connectedSortable">
      <li v-for="item in listBFiltered" :key="item.id" :data-id="item.id">{{ item.title }}</li>
    </ul>
  </div>
</div>

Agregar una clave soluciona tu problema .