Wiederverwendung der gleichen v-App in vue

Question

Ich habe die unten Mops/html:

  table.accountinfo.table.table-sm 
       thead.thead 
       tr 
        th # 
        th Name 
        th Address 
        th Balance 
       tbody 
       tr(v-for="account in accounts") 
        td {{account.accountID}} 
        td {{account.name}} 
        td 
        span(title='{{account.accountAddress}}').ellipsisoverflow {{account.accountAddress}} 
        td 
        span {{account.balance}} 
      table.accountinfo.table.table-sm 
       thead.thead 
       tr 
        th # 
        th Name 
        th Address 
        th Balance 
       tbody 
       tr(v-for="account in accounts") 
        td {{account.accountID}} 
        td {{account.name}} 
        td 
        span(title='{{account.accountAddress}}').ellipsisoverflow {{account.accountAddress}} 
        td 
        span {{account.balance}} 

Und das unter vue Skript:

var accountinfo = new Vue({ 
    el: '.accountinfo', 
    data: { 
     accounts: [] 
    } 
}); 

Wenn ich meine HTML-Datei öffnen, wird nur die erste Tabelle ist richtig erstellt (mehrere Zeilen mit den richtigen Daten). Die zweite Tabelle wird jedoch nicht korrekt erstellt und zeigt die Werte einschließlich der Klammern an (und wird somit nicht durch den Test ersetzt). Ich nehme an, dass dies der Fall ist, da dieselbe V-App zweimal verwendet wird. Wie kann ich dies so konfigurieren, dass beide Elemente/Tabellen mit derselben v-App korrekt erstellt werden?

Answer 1

Ich glaube nicht, dass es speziell überall geschrieben ist, aber wie die docs Verknüpfung mit IDs getan wird, dies ist sicherzustellen, dass eine Vue-Instanz nur mit 1 Wurzelelement verknüpft ist.

Es ist nicht möglich, 1 App auf mehreren Elementen zu mounten.

Im Einklang mit Ihrem bearbeiten, haben Sie ein paar Möglichkeiten zu tun, was Sie wollen:

1. Ändern der Wähler für die zweite Form und registrieren eine andere Vue Instanz mit dieser ID.
2. Haben Sie einen Verpackungscontainer, in dem die Vue-Instanz registriert ist, kann jede Tabelle dieselbe accounts Variable lesen.