Als «vue-component» getaggte Fragen

Component ist eine leistungsstarke Vue-Funktion, mit der grundlegende HTML-Elemente erweitert werden können, um wiederverwendbaren Code zu kapseln.

9
Vue.js - So suchen Sie ordnungsgemäß nach verschachtelten Daten
Ich versuche zu verstehen, wie man richtig auf Requisitenvariationen achtet. Ich habe eine übergeordnete Komponente (.vue-Dateien), die Daten von einem Ajax-Aufruf empfängt, die Daten in ein Objekt einfügt und damit eine untergeordnete Komponente über eine v-for-Direktive rendert, unter einer Vereinfachung meiner Implementierung: <template> <div> <player v-for="(item, key, index) in players" …
13
Wie man auf 'Requisiten'-Änderungen wartet
In den VueJs 2.0-Dokumenten kann ich keine Hooks finden, die propsÄnderungen abhören würden. Hat VueJs solche Haken wie onPropsUpdated()oder ähnlich? Aktualisieren Wie @wostex vorgeschlagen hat, habe ich versucht, watchmein Eigentum, aber nichts hat sich geändert. Dann wurde mir klar, dass ich einen Sonderfall habe: <template> <child :my-prop="myProp"></child> </template> <script> export …
7
Vue v-on: click funktioniert nicht für Komponenten
Ich versuche, die On-Click-Direktive in einer Komponente zu verwenden, aber sie scheint nicht zu funktionieren. Wenn ich auf die Komponente klicke, passiert nichts, wenn in der Konsole ein "Test angeklickt" werden soll. Ich sehe keine Fehler in der Konsole, daher weiß ich nicht, was ich falsch mache. index.html <!DOCTYPE html> …
2
Standardwerte für Vue-Komponenten-Requisiten und wie kann überprüft werden, ob ein Benutzer die Requisiten nicht festgelegt hat?
1. Wie kann ich den Standardwert für eine Komponentenstütze in Vue 2 festlegen? Zum Beispiel gibt es eine einfache moviesKomponente, die auf diese Weise verwendet werden kann: <movies year="2016"><movies> Vue.component('movies', { props: ['year'], template: '#movies-template', ... } Wenn ein Benutzer jedoch nicht Folgendes angibt year: <movies></movies> dann nimmt die Komponente …
5
Vue 'Standard exportieren' vs 'neuer Vue'
Ich habe gerade Vue installiert und einige Tutorials befolgt, um ein Projekt mit der vue-cli-Webpack-Vorlage zu erstellen. Wenn es die Komponente erstellt, stelle ich fest, dass es unsere Daten innerhalb der folgenden Bereiche bindet: export default { name: 'app', data: [] } Während ich in anderen Tutorials sehe, dass Daten …
4
Vuex - Die berechnete Eigenschaft "Name" wurde zugewiesen, hat jedoch keinen Setter
Ich habe eine Komponente mit einer Formularvalidierung. Es ist ein mehrstufiges Checkout-Formular. Der folgende Code ist für den ersten Schritt. Ich möchte überprüfen, ob der Benutzer Text eingegeben hat, seinen Namen im globalen Status speichern und dann zum nächsten Schritt senden. Ich benutze vee-validate und vuex <template> <div> <div class='field'> …
4
Requisiten dynamisch an dynamische Komponenten in VueJS übergeben
Ich habe eine dynamische Ansicht: <div id="myview"> <div :is="currentComponent"></div> </div> mit einer zugeordneten Vue-Instanz: new Vue ({ data: function () { return { currentComponent: 'myComponent', } }, }).$mount('#myview'); Dadurch kann ich meine Komponente dynamisch ändern. In meinem Fall, ich habe drei verschiedene Komponenten: myComponent, myComponent1, und myComponent2. Und ich wechsle …
6
Das Lösen der Interpolation innerhalb von Attributen wurde entfernt. Verwenden Sie v-bind oder die Kurzform des Doppelpunkts? Vue.JS 2
Meine Vue-Komponente ist wie folgt: <template> <div> <div class="panel-group" v-for="item in list"> ... <div class="panel-body"> <a role="button" data-toggle="collapse" href="#purchase-{{ item.id }}" class="pull-right" aria-expanded="false" aria-controls="collapseOne"> Show </a> </div> <div id="purchase-{{ item.id }}" class="table-responsive panel-collapse collapse" role="tabpanel"> ... </div> </div> </div> </template> <script> export default { ... computed: { list: function() { …
11
[Vue warn]: Eigenschaft oder Methode ist nicht für die Instanz definiert, sondern wird beim Rendern referenziert
var MainTable = Vue.extend({ template: "<ul>" + "<li v-for='(set,index) in settings'>" + "{{index}}) " + "{{set.title}}" + "<button @click='changeSetting(index)'> Info </button>" + "</li>" + "</ul>", data: function() { return data; } }); Vue.component("main-table", MainTable); data.settingsSelected = {}; var app = new Vue({ el: "#settings", data: data, methods: { changeSetting: function(index) …
8
Wie formatiere ich Währungen in einer Vue-Komponente?
Meine Vue-Komponente sieht folgendermaßen aus: <template> <div> <div class="panel-group"v-for="item in list"> <div class="col-md-8"> <small> Total: <b>{{ item.total }}</b> </small> </div> </div> </div> </template> <script> export default { ... computed: { list: function() { return this.$store.state.transaction.list }, ... } } </script> Das Ergebnis von {{ item.total }}ist 26000000 Aber ich möchte, …
8
Wenden Sie eine globale Variable auf Vuejs an
Ich habe eine Javascript-Variable, die ich bei der Instanziierung global an Vue-Komponenten übergeben möchte, sodass entweder jede registrierte Komponente sie als Eigenschaft hat oder global darauf zugegriffen werden kann. Hinweis :: Ich muss diese globale Variable für vuejs als READ ONLY- Eigenschaft festlegen
5
VueJS greift vom übergeordneten Element auf die Daten der untergeordneten Komponente zu
Ich benutze das Vue-Cli-Gerüst für das Webpack Die Struktur / Hierarchie meiner Vue-Komponenten sieht derzeit folgendermaßen aus: App PDF-Vorlage Hintergrund Dynamisches Vorlagenbild Statisches Vorlagenbild Abschlag Auf App-Ebene möchte ich eine vuejs-Komponentenmethode, mit der alle Daten der untergeordneten Komponente zu einem einzigen JSON-Objekt zusammengefasst werden können, das an den Server gesendet …
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.