выбранным оказывается последний добавленный элемент, несмотря на то, что всем добавленным элементам в GetSelected я вернул ' '
v-model
? из дочернего мне нужно передать именно ключ b в родительский
this.$emit('do-something')
.<child-component :object="objects.a" @do-something="doSomething('a')" />
<child-component :object="objects.b" @do-something="doSomething('b')" />
<!--> или <-->
<child-component v-for="(v, k) in objects" :object="v" @do-something="doSomething(k)" />
methods: {
doSomething(key) {
// чего-то делаете
},
...
затем пройтись по objects и при совпадении ключей (a, b или c) выполнить действия над значением
<child-component :object="objects.a" @do-something="doSomething(objects.a)" />
<child-component :object="objects.b" @do-something="doSomething(objects.b)" />
<!--> или <-->
<child-component v-for="n in objects" :object="n" @do-something="doSomething(n)" />
this.$emit('do-something', this.object)
. Тогда не придётся дублировать обращение к нему в родителе:<child-component :object="objects.a" @do-something="doSomething" />
<child-component :object="objects.b" @do-something="doSomething" />
<!--> или <-->
<child-component v-for="n in objects" :object="n" @do-something="doSomething" />
function createTree({
arr,
idKey = 'id',
parentKey = 'parentId',
childrenKey = 'children',
}) {
const tree = Object.fromEntries(arr.map(n => [ n[idKey], { ...n, [childrenKey]: [] } ]));
return Object.values(tree).filter(n => !tree[n[parentKey]]?.[childrenKey].push(n));
}
v-tree
, выводящий древовидные данные:props: {
items: {
type: Array,
default: () => [],
},
maxdepth: {
type: Number,
default: Infinity,
},
},
<ul v-if="Array.isArray(items) && items.length && maxdepth">
<li v-for="n in items" :key="n.id">
{{ n.value }}
<v-tree :items="n.children" :maxdepth="maxdepth - 1" />
</li>
</ul>
v-model.lazy
.const current = ref(props.value);
emits("change", current);
@change="changeCount"
function changeCount(value) { count.value = value; }
emits("change", current);
---> emits("change", current.value);
input
, чтобы v-model
обновил данные компонента:methods: {
removeLastChar({ target: t }) {
t.value = t.value.slice(0, -1);
t.dispatchEvent(new Event('input'));
},
...
},
<input
@focus="removeLastChar"
...
>
sortOpen() {
this.$emit('sortOpen', this.sortWindowOpen = !this.sortWindowOpen);
},
<TableControl @sortOpen="addStatic = $event"></TableControl>
data: () => ({
meetupId: null,
meetupData: null,
}),
watch: {
meetupId(val) {
fetch(`https://course-vue.javascript.ru/api/meetups/${val}`)
.then(r => r.json())
.then(r => this.meetupData = r);
},
},
<label v-for="i in 5">
<input type="radio" name="meetupId" :value="i" v-model="meetupId">
{{ i }}
</label>
<pre>{{ meetupData }}</pre>
@update:modelValue="$emit('change', $event.target.value)"
update:modelValue
?@change="$emit('update:modelValue', $event.target.value)"
model: { prop: 'modelValue', event: 'update:modelValue' },
BREAKING:v-bind
's.sync
modifier and componentmodel
option are removed and replaced with an argument on v-model;
Как должен выглядеть json...
[
{
title: '...',
children: [
{
title: '...',
children: [
{
title: '...',
},
...
],
},
...
],
},
...
]
...для генерации такого вложенного списка через v-for?
name: 'v-tree',
props: [ 'items' ],
<ul v-if="Array.isArray(items) && items.length">
<li v-for="n in items">
{{ n.title }}
<v-tree :items="n.children" />
</li>
</ul>
const popup =createApp(App);
popup.$store.dispatch
$store
, вам нужен результат вызова mount
, а не createApp
.store.dispatch
. computed: {
bullshitEmails() {
const search = this.search.trim().toLowerCase();
return this.emails.map(n => ({
email: n,
marked: !!search && n.toLowerCase().includes(search),
}));
},
},
<ul>
<li
v-for="{ email, marked } in bullshitEmails"
v-text="email"
:class="{ marked }"
></li>
</ul>
const props = defineProps({
showBgBlue: {
type: Boolean,
default: true,
},
});
const mainClass = computed(() => props.showBgBlue ? 'bg-blueGray-50 py-12' : 'bg-white');
new Vue({
loaves: [
this.loaves[idx] =
computed: {
columns() {
return Object.keys(this.fedresurs.find(n => n.items.length)?.items[0] ?? {});
},
},
<table v-for="messages in fedresurs">
<caption>{{ messages.title }}</caption>
<thead>
<tr>
<th v-for="column in columns">{{ column }}</th>
</tr>
</thead>
<tbody>
<tr v-for="item in messages.items">
<td v-for="column in columns">{{ item[column] }}</td>
</tr>
</tbody>
</table>
Использую yandex-map@beta
пытаюсь изменить параметр zoom в YandexMap, но не работает, и что-то мне подсказывает, что не всё так просто
setup() {
...
let map = null;
return {
...
onCreate: e => map = e,
updateZoom: z => map.setZoom(Math.max(1, Math.min(19, map.getZoom() + z))),
};
},
<yandex-map
...
@created="onCreate"
/>
...
<button @click="updateZoom(+1)">+</button>
<button @click="updateZoom(-1)">-</button>
data: () => ({
currencies: [
{ title: 'рубль', rate: 1, val: 0 },
{ title: 'доллар', rate: 62.65, val: 0 },
{ title: 'евро', rate: 60.90, val: 0 },
],
}),
methods: {
onInput({ rate, val }) {
this.currencies.forEach(n => n.val = val * rate / n.rate);
},
},
<div v-for="n in currencies">
<input
v-model.number="n.val"
@input="onInput(n)"
type="number"
min="0"
>
{{ n.title }}
</div>