не корректно работает
data: () => ({
scroll: 0,
}),
computed: {
buttonClass() {
return что-то, зависящее от значения this.scroll;
},
},
created() {
const { body } = document;
const onScroll = () => this.scroll = body.scrollTop;
body.addEventListener('scroll', onScroll);
this.$on('hook:beforeDestroy', () => body.removeEventListener('scroll', onScroll));
},<button :class="buttonClass"></button>
<div v-for="(story, idx) in stories" :key="idx"><div v-for="n in stories.hits" :key="n.objectID">
.then(this.dates.push(response['dates'] ) ),.then(response => this.dates = response.data.dates)
// или
.then(response => this.dates.push(...response.data.dates))computed: {
filteredDialogs() {
const { dialogs, search } = this;
return search
? dialogs.filter(n => n.fullname.includes(search))
: dialogs;
},
},v-if="dialogs.length > 0" v-for="(dialog, index) in dialogs"
<ul class="chat--messages__wrapper" ref="messages">this.$nextTick(() => {
const { messages } = this.$refs;
messages.scrollTop = messages.scrollHeight;
});attributes: [], // наполняется посредством rest API
props: [ 'value' ]; а при необходимости его обновить отдаёт наверх новый массив: this.$emit('input', this.value.map(...)). Это позволит использовать на компоненте директиву v-model: <attributes-list v-model="attributes" />.document.getElementById(selector).checked = true;$emit:methods: {
update(attr, checked) {
this.$emit('input', this.value.map(n => n === attr
? { ...n, checked }
: n
));
},
},<div v-for="n in value">
<input type="checkbox" :checked="n.checked" @input="update(n, $event.target.checked)">
<button @click="update(n, true)">Да</button>
<button @click="update(n, false)">Нет</button>
</div>v-model на чекбоксах, то можно собрать объект вида { 'имя/id/ещё что-то уникальное': checked } и завернуть его в Proxy:computed: {
attributes() {
return new Proxy(Object.fromEntries(this.value.map(n => [ n.name, n.checked ])), {
set: (target, key, val) => {
this.$emit('input', this.value.map(n => n.name === key
? { ...n, checked: val }
: n
));
return true;
},
});
},
},<div v-for="(v, k) in attributes">
<input type="checkbox" v-model="attributes[k]">
<button @click="attributes[k] = true">Да</button>
<button @click="attributes[k] = false">Нет</button>
</div><div @click="changeCategory(subcat)">
...
<div v-for="(v, k) in active">{{ k }}: {{ v }}</div>changeCategory({ a, b }) {
this.active = { a, b };
},Как сделать, чтобы при загрузке сайта первый пункт первого меню уже был выбранным?
created() {
this.changeCategory(this.categories[0].sub[0]);
},v-if/v-else - один для показа форматированного значения, другой для редактирования:<input v-if="edit" v-model="price" @blur="edit = false">
<input v-else :value="formatPrice(price)" @focus="edit = true">data: () => ({
edit: false,
price: 666,
}),
methods: {
formatPrice: price => `${(+price).toLocaleString()} руб.`,
},computed: {
fullData() {
return this.posts.map(post => ({
post,
user: this.users.find(user => user.id === post.userId) ?? {},
}));
},
},<div v-for="n in fullData">
<div>{{ n.post.title }}</div>
<div>{{ n.user.name }}</div>
<div>{{ n.post.body }}</div>
</div><input type="checkbox" v-model="sort">
<div v-for="dog in sortedDogs">data: () => ({
sort: false,
}),
computed: {
sortedDogs() {
return this.sort
? [...this.allDogs].sort((a, b) => a.breeds[0].name.localeCompare(b.breeds[0].name))
: this.allDogs;
},
},v-model + watch:<input v-model="text">watch: {
text(newVal, oldVal) {
console.log(newVal, oldVal);
},
},Cannot read property 'concat' of null
В чем ошибка и как в итоге их объединить?
computed: {
fullArray() {
const { users, info } = this;
return user && info
? здесь объединяете данные массивов
: [];
},
},data: () => ({
date: new Date(),
}),
filters: {
formatDate1: d => d.toLocaleString('ru-RU').replace(',', '').slice(0, -3),
},
methods: {
formatDate2: d => [ 'Date', 'Month', 'FullYear', 'Hours', 'Minutes' ]
.map((n, i) => '.. :'.charAt(~-i) + `${d[`get${n}`]() + !~-i}`.padStart(2, 0))
.join(''),
},<div class="fullDate">{{ date | formatDate1 }}</div>
<div class="fullDate">{{ formatDate2(date) }}</div>Некоторые HTML-элементы, такие как<ul>,<ol>,<table>и<select>имеют ограничения на то, какие элементы могут отображаться внутри них, или например элементы, такие как<li>,<tr>и<option>могут появляться только внутри других определённых элементов.
Это приведёт к проблемам при использовании компонентов с элементами, которые имеют такие ограничения. Например:
<table> <blog-post-row></blog-post-row> </table>
Пользовательский компонент<blog-post-row>будет поднят выше, так как считается недопустимым содержимым, вызывая ошибки в итоговой отрисовке. К счастью, специальный атрибутisпредоставляет решение этой проблемы:
<table> <tr is="blog-post-row"></tr> </table>