Passendes verwandtes Modell zu vue 2.0-Komponente

Question

Ich baue ein vue.js-Frontend für eine Django-basierte JSON-REST-API (die DREST verwendet - dynamische Restansichten und DRF - Django Rest Framework).

Im vue-Frontend habe ich eine Artikelliste, die durch ein Array mit v-iteriert, um eine Einzelkomponente zu verwenden. Grundsätzlich gilt:

<ul> 
    <book v-for="book in books" 
    :book="book" 
    :author="authors*[book.author]"> 
    </book> 
</ul> 

Der Stern zeigt das Bit an, das augenscheinlich augenscheinlich aktuell nicht korrekt ist. Die Idee ist, dass die Komponente zwei Requisiten empfängt, das primäre Objekt, das angezeigt wird (Buch) und das sekundäre, referenzierte Objekt aus dem verwandten Modell (Autor).

Die Daten für die Elternkomponente enthalten ein Array von Büchern und ein Array von Autoren, die die API "seitenweise" lädt und nur die Autoren bereitstellt, auf die in der Seite der Bücher verwiesen wird. Im Buchobjekt wird der Autor durch seine ID referenziert. Eine Alternative könnte sein, dass der Serializer die relevanten Autorendaten in jedes JSON-Buchobjekt einfügt. Dies wäre jedoch weniger effizient, da einige Seiten nur einen oder wenige Autoren enthalten, so dass es unnötige Wiederholungen geben würde.

Hat vue.js eine Möglichkeit, das richtige Autorenobjekt aus dem Autorenarray zu erhalten (mithilfe der Autoren-UID, die das Autorenfeld des Buches enthält) und an die Einzelelementkomponente (Buch) weiterzuleiten?

Oder sollte dies in einfachem Javascript (und wenn ja wie) geschehen?

Danke ..!

Answer 1

Sie können immer noch eine Methode verwenden:

export default { 
    data() { 
     return { 
      authors: [] 
     } 
    }, 
    methods: { 
     findAuthor (id) { 
      return this.authors.find(x => x.id === id) 
     } 
    } 
} 

<ul> 
    <book v-for="book in books" 
    :book="book" 
    :author="findAuthor(book.author)"> 
    </book> 
</ul>