<RatingSelect v-model="rating" />
const props = defineProps({
modelValue: {
type: Number,
required: true,
},
maxRating: {
type: Number,
default: 10,
},
});
const emit = defineEmits([ 'update:modelValue' ]);
const selected = computed({
get: () => props.modelValue,
set: val => emit('update:modelValue', val),
});
<li v-for="n in maxRating">
<label>
<input type="radio" :value="n" v-model="selected">
{{ n }}
</label>
</li>
data: () => ({
buttons: [
{ className: 'btn1', text: 'Limit' },
{ className: 'btn2', text: 'Market' },
],
active: 0,
}),
<button
v-for="(n, i) in buttons"
v-text="n.text"
:class="[ 'btn', n.className, { 'active-btn': i === active } ]"
@click="active = i"
></button>
btn*
действительно идут по порядку)data: () => ({
buttons: [ 'Limit', 'Market' ],
active: 'Limit',
}),
<button
v-for="(n, i) in buttons"
:class="`btn btn${i + 1} ${n === active ? 'active-btn' : ''}`"
@click="active = n"
>{{ n }}</button>
<YandexClusterer
@vue:mounted="onClustererMounted"
...
methods: {
onClustererMounted(e) {
e.component.exposed.events.add('click', обработчикКлика);
},
...
@click.stop
).data: () => ({
openedPopup: null,
}),
methods: {
togglePopup(popup) {
this.openedPopup = this.openedPopup === popup ? null : popup;
},
},
@click="togglePopup('search')"
v-show="openedPopup === 'search'"
const { filledColor: F, emptyColor: E, ...props } = defineProps({
value: Number,
maxValue: Number,
segments: {
type: Number,
default: 5,
},
filledColor: {
type: String,
default: 'red',
},
emptyColor: {
type: String,
default: 'black',
},
});
const background = val =>
val >= 1 ? F :
val <= 0 ? E :
`linear-gradient(to right, ${F}, ${F}, ${val * 100}%, ${E} ${val * 100}%)`;
<div class="rating">
<div
v-for="i in segments"
:style="{ background: background(value / maxValue * segments - i + 1) }"
class="rating-segment"
></div>
</div>
false
, всё выбрано - true
, для остальных вариантов undefined
, при котором в true
будет выставляться indeterminate. Также у него будет сеттер - если попытаться назначить true
, то выбранными должны стать все чекбоксы; если false
, то никто.const items = ref([
{ id: 69, title: 'hello, world!!' },
{ id: 187, title: 'fuck the world' },
{ id: 666, title: 'fuck everything' },
]);
const checked = ref([ 187 ]);
const isAllChecked = computed({
get: () => ({
0: false,
[items.value.length]: true,
})[checked.value.length],
set: val => checked.value = val ? items.value.map(n => n.id) : [],
});
<div>
<label>
<input
type="checkbox"
v-model="isAllChecked"
:indeterminate.prop="isAllChecked === undefined"
>
<b>Check all</b>
</label>
</div>
<div v-for="n in items" :key="n.id">
<label>
<input type="checkbox" v-model="checked" :value="n.id">
{{ n.title }}
</label>
</div>
clearInterval из функции stopTheTimer результата необходимого не показал
data() { <...> }, mounted() { <...> }, stopTheTimer() { clearInterval(this.interval); }
v-model
:props: {
modelValue: {
type: String,
default: '',
},
...
<select
:value="modelValue"
@input="$emit('update:modelValue', $event.target.value)"
>
<option
v-for="n in options"
v-text="n.label"
:value="n.value"
></option>
</select>
data: () => ({
selected: Array(10).fill(null),
...
}),
methods: {
getValue(index) {
this.active = index;
console.log(this.selected[index]);
},
},
<div
v-for="(n, i) in selected"
class="test__item"
:class="{ test__item_active: i === active }"
>
<span @click="getValue(i)">элемент списка</span>
<Select v-model="selected[i]" :options="options" />
</div>
const profilesSorting = computed(() => profiles
.value
.filter(n => n.id === filters.value.id)
.sort(...)
.slice(...)
);
выбранным оказывается последний добавленный элемент, несмотря на то, что всем добавленным элементам в 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>