Zauważ, że readymetoda została usunięta w Vue 2.0 i nowszych. Byłem bardzo zdezorientowany, gdy readymetoda nie była wykonywana. stackoverflow.com/a/40209796/126751
Niestety, to nie działa w TypeScript, ponieważ this._uidjest nieprawidłowe. Zamiast tego wygeneruj swój identyfikator samodzielnie, np. public id = uuid4();Zobacz uuid4 .
Erik Vullings
2
Musiałem umieścić inicjalizację w metodzie beforeMount (), aby upewnić się, że identyfikator został ustawiony w DOM, kiedy próbowałem uzyskać do niego dostęp z metody mount ().
Do punktu Nihata (powyżej): Evan Odradzasz używanie _uid: „Maszyna wirtualna _uid jest zarezerwowana do użytku wewnętrznego i ważne jest, aby zachować jej prywatność (i nie polegać na niej w kodzie użytkownika), aby zachować elastyczność w zmianie jej zachowanie dla potencjalnych przyszłych przypadków użycia. ... Sugerowałbym samodzielne wygenerowanie identyfikatorów UID [za pomocą modułu, globalnego miksu itp.] "
Korzystanie z sugerowanego miksera w tym problemie z GitHubem do generowania UID wydaje się lepszym podejściem:
Aktualizacja:
kod zgłosi błąd, jeśli ._uidwłaściwość nie istnieje w instancji, dzięki czemu można ją zaktualizować, aby używała czegoś niestandardowego lub nowej unikalnej właściwości identyfikatora, jeśli jest dostarczana przez Vue.
Chociaż odpowiedź zxzaka jest świetna; _uidnie jest opublikowaną właściwością API. Aby zaoszczędzić sobie bólu głowy na wypadek, gdyby zmienił się w przyszłości, możesz zaktualizować kod za pomocą jednej zmiany za pomocą wtyczki, jak poniżej.
Vue.use({
install: function(Vue, options) {
Object.defineProperty(Vue.prototype, "uniqId", {
get: function uniqId() {
if ('_uid' in this) {
return this._uid;
}
throw new Error("_uid property does not exist");
}
});
}
});
Nadal jest to uid, który w twojej własnej odpowiedzi jest odradzany. Nie publikuj odpowiedzi nawołujących do złych praktyk. Tę odpowiedź należy usunąć.
Hybrydowy programista sieciowy
2
Tak, ale w przypadku zmiany / usunięcia opublikowanego interfejsu API będą musieli zmienić tylko jedno miejsce w całym kodzie. W drugiej odpowiedzi dotyczyło to części. Podkreśliłem to już w tytule.
Nihat,
Ponadto właśnie zaktualizowałem kod, aby generował błąd w przypadku, gdy _uidwłaściwość już nie istnieje.
Żadne z innych rozwiązań nie spełnia wymagania posiadania więcej niż jednego elementu formularza w komponencie. Oto moje podejście do wtyczki, która opiera się na wcześniej udzielonych odpowiedziach:
Vue.use((Vue) => {
// Assign a unique id to each component
let uuid = 0;
Vue.mixin({
beforeCreate: function() {
this.uuid = uuid.toString();
uuid += 1;
},
});
// Generate a component-scoped id
Vue.prototype.$id = function(id) {
return "uid-" + this.uuid + "-" + id;
};
});
Twórca Vue.js mówi, że powinieneś unikać używania _uid, ponieważ jest on do użytku wewnętrznego i pewnego dnia może go usunąć, zmienić jego nazwę lub zmienić jego zachowanie.
Omid Sadeghi
1
Dzięki, myślę, że to prawda. Zaktualizowałem kod za pomocą innego rozwiązania, mam nadzieję, że nadal jest wystarczająco proste. W każdym razie ideą tego przykładu było użycie obliczonej właściwości.
Cristi Draghici
uniqueId from lodash to moim zdaniem najlepsze podejście
Giorgio Tempesta
1
Jeśli używasz TypeScript, bez żadnej wtyczki, możesz po prostu dodać statyczny identyfikator do komponentu klasy i zwiększyć go w metodzie created (). Każdy komponent będzie miał unikalny identyfikator (dodaj prefiks ciągu, aby uniknąć kolizji z innymi komponentami, które używają tej samej końcówki)
Stosowanie komponentów to trend. Komponenty są fajne, są małe, oczywiste, łatwe w użyciu i modułowe. Dopóki nie dojdzie do własności id.
Niektóre atrybuty znaczników HTML wymagają użycia właściwości id, np. Label [for], input [form] i wiele atrybutów aria- *. Problem z id polega na tym, że nie jest on modułowy. Jeśli kilka właściwości id na stronie ma tę samą wartość, mogą one na siebie wpływać.
VueUniqIds pomaga pozbyć się tego problemu. Dostarcza zestaw dyrektyw związanych z identyfikatorem, których wartość jest automatycznie modyfikowana przez dodanie unikalnego ciągu, przy czym atrbitue jest łatwy do odczytania.
Trudno jest uzasadnić takie podejście, gdy istnieje realna szansa na kolizję identyfikatorów ...
Shadow
-7
Można to również osiągnąć za pomocą tego wzorca (Vue 2.0 v-bind), więc powiedzmy, że masz listę elementów do iteracji i chcesz nadać niektórym elementom dom niepowtarzalne identyfikatory.
new Vue({
el:body,
data: {
myElementIds : [1,2,3,4,5,6,8]
}
})
HTML
<div v-for="id in myElementIds">
<label v-bind:for="id">Label text for {{id}}</label>
<input v-bind:id="id" type="text" />
<div>
Odpowiedzi:
Każdy komponent ma unikalny identyfikator, do którego można uzyskać dostęp jako
this._uid
.Jeśli chcesz mieć większą kontrolę nad identyfikatorami, możesz na przykład wygenerować je w komponencie nadrzędnym.
źródło
ready
metoda została usunięta w Vue 2.0 i nowszych. Byłem bardzo zdezorientowany, gdyready
metoda nie była wykonywana. stackoverflow.com/a/40209796/126751data
musi być funkcją, która zwraca obiekt: vuejs.org/v2/guide/components.html#data-Must-Be-a-Functionthis._uid
jest nieprawidłowe. Zamiast tego wygeneruj swój identyfikator samodzielnie, np.public id = uuid4();
Zobacz uuid4 ._uid
go, „ jest zarezerwowany do użytku wewnętrznego i ważne jest, aby zachować go w tajemnicy (i nie polegać na nim w kodzie użytkownika), aby zachować elastyczność w zakresie zmiany jego zachowania dla potencjalnych przyszłych przypadków użycia ”.Do punktu Nihata (powyżej): Evan Odradzasz używanie _uid: „Maszyna wirtualna _uid jest zarezerwowana do użytku wewnętrznego i ważne jest, aby zachować jej prywatność (i nie polegać na niej w kodzie użytkownika), aby zachować elastyczność w zmianie jej zachowanie dla potencjalnych przyszłych przypadków użycia. ... Sugerowałbym samodzielne wygenerowanie identyfikatorów UID [za pomocą modułu, globalnego miksu itp.] "
Korzystanie z sugerowanego miksera w tym problemie z GitHubem do generowania UID wydaje się lepszym podejściem:
źródło
Aktualizacja: kod zgłosi błąd, jeśli
._uid
właściwość nie istnieje w instancji, dzięki czemu można ją zaktualizować, aby używała czegoś niestandardowego lub nowej unikalnej właściwości identyfikatora, jeśli jest dostarczana przez Vue.Chociaż odpowiedź zxzaka jest świetna;
_uid
nie jest opublikowaną właściwością API. Aby zaoszczędzić sobie bólu głowy na wypadek, gdyby zmienił się w przyszłości, możesz zaktualizować kod za pomocą jednej zmiany za pomocą wtyczki, jak poniżej.źródło
_uid
właściwość już nie istnieje.Aktualizacja
Opublikowałem wtyczkę Vue vue-unique-id do tego na npm .
Odpowiedź
Żadne z innych rozwiązań nie spełnia wymagania posiadania więcej niż jednego elementu formularza w komponencie. Oto moje podejście do wtyczki, która opiera się na wcześniej udzielonych odpowiedziach:
Nie zależy to od
_uid
właściwości wewnętrznej, która jest zarezerwowana do użytku wewnętrznego .Użyj go w ten sposób w swoim komponencie:
Aby stworzyć coś takiego:
źródło
Następnie w swoim kodzie ...
W ten sposób nie ładujesz całej biblioteki lodash, ani nawet nie zapisujesz całej biblioteki do
node_modules
.źródło
W Vue2 użyj v-bind.
Powiedz, że mam obiekt do ankiety
źródło
v-for="(option, index) in poll.body.options"
i użyćindex
w swoim v-bind'u.Proste podejście, którego nie widziałem w odpowiedziach, to:
źródło
Jeśli używasz TypeScript, bez żadnej wtyczki, możesz po prostu dodać statyczny identyfikator do komponentu klasy i zwiększyć go w metodzie created (). Każdy komponent będzie miał unikalny identyfikator (dodaj prefiks ciągu, aby uniknąć kolizji z innymi komponentami, które używają tej samej końcówki)
źródło
Ten pakiet wydaje się być dobrym rozwiązaniem podstawowego problemu z posiadaniem nieunikalnych identyfikatorów w Twoim DOM w wielu komponentach:
vue-uniq-ids
źródło
Jeśli twój uid nie jest używany przez inny składnik, mam pomysł.
uid: Math.random()
Proste i wystarczające.
źródło
Można to również osiągnąć za pomocą tego wzorca (Vue 2.0 v-bind), więc powiedzmy, że masz listę elementów do iteracji i chcesz nadać niektórym elementom dom niepowtarzalne identyfikatory.
HTML
Mam nadzieję, że to pomoże
źródło