.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;
});
def countCarsByBrand(cars, brands):
return sum(len(v.keys()) for k, v in cars.items() if k in brands)
print(countCarsByBrand(cars, [ 'Audi', 'BMW' ]))
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>
document.querySelector('table').addEventListener('click', e => {
const td = e.target.closest('td');
if (td) {
const index = td.cellIndex;
console.log(index);
}
});
<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()} руб.`,
},
get searchtest() {
const search = this.state.search.toLowerCase().trim();
return search
? searchtest.filter(n => Object.values(n).some(m => m.toLowerCase().includes(search)))
: searchtest;
}
{this.searchtest.map((kef, i, a) => ( <div style={style}> <div key={kef.name} data-id={kef.name}> name: {kef.name} </div> <div key={kef.id} data-id={kef.id}> id: {kef.id} </div> </div> ))}
{this.searchtest.map(n => (
<div key={n.id}>
<div>name: {n.name}</div>
<div>id: {n.id}</div>
</div>
))}
.gallery__item:hover::before {
content: "";
position: absolute;
width: calc(100% - 20px);
height: calc(100% - 20px);
left: 10px;
top: 10px;
box-sizing: border-box;
border: 2px solid #ccc;
background: transparent;
z-index: 666;
}
\b[A-Z][a-z]?\d?\b