Pytania otagowane jako vue-component

Komponent to potężna funkcja Vue, która umożliwia rozszerzenie podstawowych elementów HTML w celu hermetyzacji kodu wielokrotnego użytku.

9
Vue.js - Jak prawidłowo obserwować zagnieżdżone dane
Staram się zrozumieć, jak prawidłowo obserwować niektóre odmiany rekwizytów. Mam komponent nadrzędny (pliki .vue), który odbiera dane z wywołania ajax, umieszczam dane w obiekcie i używam go do renderowania komponentu podrzędnego za pomocą dyrektywy v-for, poniżej uproszczenia mojej implementacji: <template> <div> <player v-for="(item, key, index) in players" :item="item" :index="index" :key="key""> …
13
Jak słuchać zmian „rekwizytów”
w VueJs 2.0 nie mogę znaleźć żadnych haków, które mogłyby nasłuchiwać propszmian. Czy VueJ ma takie haki? onPropsUpdated() lub podobne? Aktualizacja Jak sugerował @wostex, próbowałem watchmojej własności, ale nic się nie zmieniło. Potem zdałem sobie sprawę, że mam specjalny przypadek: <template> <child :my-prop="myProp"></child> </template> <script> export default { props: ['myProp'] …
7
Vue v-on: click nie działa na komponencie
Próbuję użyć dyrektywy on click wewnątrz komponentu, ale wydaje się, że nie działa. Kiedy klikam komponent, nic się nie dzieje, kiedy powinienem otrzymać „kliknięcie testu” w konsoli. Nie widzę żadnych błędów w konsoli, więc nie wiem, co robię źle. index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vuetest</title> </head> <body> <div …
13
vuejs aktualizuje dane nadrzędne z komponentu podrzędnego
Zaczynam bawić się vuejsami (2.0). Zbudowałem prostą stronę z jednym komponentem. Strona ma jedną instancję Vue z danymi. Na tej stronie zarejestrowałem się i dodałem komponent do html. Komponent ma jeden input[type=text]. Chcę, aby ta wartość odzwierciedlała rodzica (główna instancja Vue). Jak poprawnie zaktualizować dane nadrzędne komponentu? Podanie związanego rekwizytu …
2
Domyślne wartości właściwości komponentu Vue i jak sprawdzić, czy użytkownik nie ustawił właściwości?
1. Jak mogę ustawić domyślną wartość właściwości komponentu w Vue 2? Na przykład istnieje prosty movieskomponent, którego można użyć w ten sposób: <movies year="2016"><movies> Vue.component('movies', { props: ['year'], template: '#movies-template', ... } Ale jeśli użytkownik nie określi year: <movies></movies> wtedy komponent przyjmie domyślną wartość właściwości year. 2. Ponadto, jaki jest …
5
Vue „Domyślny eksport” a „Nowy Vue”
Właśnie zainstalowałem Vue i postępowałem zgodnie z kilkoma samouczkami, aby stworzyć projekt przy użyciu szablonu vue-cli webpack. Kiedy tworzy komponent, zauważam, że wiąże nasze dane wewnątrz następujących elementów: export default { name: 'app', data: [] } Podczas gdy w innych samouczkach widzę, że dane są powiązane z: new Vue({ el: …
6
Komunikacja między komponentami rodzeństwa w VueJs 2.0
Przegląd W Vue.js 2.x model.synczostanie wycofany . Więc jaki jest właściwy sposób komunikacji między komponentami rodzeństwa w Vue.js 2.x ? tło Jak rozumiem Vue 2.x, preferowaną metodą komunikacji z rodzeństwem jest użycie sklepu lub magistrali zdarzeń . Według Evana (twórcy Vue): Warto również wspomnieć, że „przekazywanie danych między komponentami” jest …
4
Vuex - Obliczona właściwość „nazwa” została przypisana, ale nie ma metody ustawiającej
Mam komponent z jakąś walidacją formularza. Jest to wieloetapowa forma płatności. Poniższy kod dotyczy pierwszego kroku. Chciałbym sprawdzić, czy użytkownik wprowadził jakiś tekst, zapisać jego nazwę w stanie globalnym, a następnie wysłać do następnego kroku. Używam vee-validate i vuex <template> <div> <div class='field'> <label class='label' for='name'>Name</label> <div class="control has-icons-right"> <input …
4
Dynamiczne przekazywanie rekwizytów do dynamicznego komponentu w VueJS
Mam dynamiczny widok: <div id="myview"> <div :is="currentComponent"></div> </div> z powiązaną instancją Vue: new Vue ({ data: function () { return { currentComponent: 'myComponent', } }, }).$mount('#myview'); To pozwala mi dynamicznie zmieniać mój komponent. W moim przypadku, mam trzy różne składniki: myComponent, myComponent1, i myComponent2. I przełączam się między nimi w …
12
[Ostrzeżenie Vue]: Właściwość lub metoda nie jest zdefiniowana w instancji, ale odwołuje się do niej podczas renderowania
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) …
6
Usunięto sposób rozwiązywania interpolacji wewnątrz atrybutów. Użyć v-bind lub skrótu dwukropka? Vue.JS 2
Mój komponent vue wygląda tak: <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() { …
8
Jak formatować waluty w komponencie Vue?
Mój komponent Vue wygląda tak: <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> Wynik {{ item.total }}jest 26000000 Ale chcę sformatować to tak: …
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.