Verschachtelte Vue-Instanz, die nicht zurückkehrt berechnet: Funktionswerte

Question

Ich benutze Zweig und in meiner Basis habe ich eine neue Vue-Instanz, die alles #app zuweist, was ein Abschnitt direkt nach dem body-Tag ist.

In users.html Seite, erweitere ich diese base.twig, Grund, warum ich nicht den gleichen Code auf der Basis haben kann. Twig ist, weil einige Daten nur an die vue auf dem Benutzer-Controller übergeben werden, so bekomme ich Fehler auf anderen Seiten, da die Benutzerdaten nicht festgelegt wurden.

Dies ist, was ich auf meinem base.twig haben

new Vue({ 
    el: '#app', 
    data: { 
     hideNav: false, 
     userMenuDropdown: false, 

     showModal: false 
    } 
}); 

Und in meinem users.html ich habe:

var UsersPage = new Vue({ 
    el: '.users__main', 
    data: { 
     search_users: '', 
     users: {{ users|raw }} 
    }, 
    computed: { 
     filteredUsers, 
    } 
}); 

function filteredUsers(){ 
    var self = this; 
    return this.users.filter(function(cust){ 
     return cust.first_name.toLowerCase().indexOf(self.search_users.toLowerCase())>=0; 
    }); 
} 

Ich versuche einfach für ein suchen Benutzer, alles funktioniert, wenn ich die erste Vue-Instanz entferne, die #app, nicht .users__main verweist.

ich Setup eine jsfiddle, um die genaue Frage zu erläutern, this version (funktioniert nicht) sowohl vue Instanzen, ein in der base.twig und die andere in der USER.HTML Datei, this version enthalten nicht beiden Instanzen (Werke).

Ich war mit Komponenten für dieses Problem, aber ich konnte nicht gehen.

Answer 1

So konnte ich es nach dem Lesen der Dokumentation herausfinden, ich wendete mit einer Komponente mit inline-template.

In meiner base.twig erstelle ich eine und nur 1 Instanz von Vue.

new Vue({ 
    el: '#app', 
}); 

Und jetzt in meiner USER.HTML Datei, die die base.twig erstreckt habe ich eine Komponente.

Dies endete als die Komponente und wie es verwendet wurde, um eine Suchfunktion zu haben, die ich in dem Beispiel in der Frage zur Verfügung gestellt habe.

Vue.component('user-search', { 
    data: function() { 
     return { 
      search_users: '', 
      users: {{ users|raw }} // this here is json_encoded data from twig passed from the php framework controller 
     } 
    }, 
    computed: { 
     filteredUsers, 
    } 
}); 

function filteredUsers(){ 
    var self = this; 
    return this.users.filter(function(cust){ 
     return cust.first_name.toLowerCase().indexOf(self.search_users.toLowerCase())>=0; 
    }); 
} 

Und die Komponente (die zeigen, wie es zu benutzen, basierend auf meinen Code):

<user-search inline-template> 
    <input type="text" v-model="search_users"> 
    <!-- rest of the code with the for loop --> 
</user-search>