@click="show = !show" ---> @click="test.show = !test.show"{{this.show === false ? 'Open' : 'Close'}} ---> {{ test.show ? 'Close' : 'Open' }}<div v-if="show" > ---> <div v-if="test.show">@click="show = !show" ---> @click="show = show === test ? null : test"{{this.show === false ? 'Open' : 'Close'}} ---> {{ show === test ? 'Close' : 'Open' }}<div v-if="show" > ---> <div v-if="show === test">
tr, который должен присутствовать всегда и tr, который должен присутствовать в зависимости от условия в общий template:<tbody>
<template v-for="item in data">
<tr>...</tr>
<tr v-if="...">...</tr>
</template>
</tbody>v-html надо её компилировать как шаблон компонента, как-то так:<component :is="getComponent(text)"></component>methods: {
getComponent(text) {
return Object.assign(Vue.compile(`<div>${this.getMessageHtml(text)}</div>`), {
methods: {
// сюда пробрасываете нужный вам обработчик клика
},
});
},
...<div v-html="getMessageHtml(text)" @click="onClick"></div>methods: {
onClick(e) {
if (e.target.tagName === 'BUTTON') {
// убедились, что клик был по кнопке - теперь делайте чего там вам надо
}
},
...Если нам нужно прокинуть данные от родителя к ребенку на сколь угодно глубокий уровень, мы можем воспользоваться provide/inject, а если нам надо в обратную сторону?
<div class="tab" @click="$router.push('/')">router-link. Там добавление класса уже реализовано, осталось только стили ему прописать.
{
title: data.title,
deadLineTimestamp: new Date(data.deadLine).getTime(),
description: data.description,
}И со слотами, и без слотов, и как только не пытался уже.
думаю что тут проблема из за proxy
Vue.toRaw(this.map).geoObjects.add(placemark);this.map = Vue.markRaw(new ymaps.Map(this.$refs.map, {
....list-enter-from {transition-group следует добавить параметр appear.
хочу сделать задержку ввода
methods: {
onInput: debounce(function(val) {
this.debouncedInput = val;
}, 500),
...<v-text-field
@input="onInput"
...computed: {
count() {
return this.orders.map(n => n.count);
},
},
watch: {
count: debounce(function(newVal, oldVal) {
this.debouncedInput = newVal.find((n, i) => n !== oldVal[i]);
}, 500),
},data: () => ({
links: [ 'tasks', 'kanban', 'activity', 'calendar', 'files' ],
}),ul
li(v-for="n in links")
router-link(:to="{ name: n }") {{ n }}
.marker
div(v-for="n in links" :class="[ `select${n}`, $route.name === n ? 'active' : '' ]")
spanconst certificate = ref({});shortingTechItems(certificate.pto)прилетает undefined
В чем проблема
как исправить?
- const shortingTechItems = (item) => {
- const arr = [];
- item.map((i) => {
- arr.push(Number(i.replace(/\D+/g, "")));
- });
- return arr;
- };
+ const shortingTechItems = items => items.map(n => +n.replace(/\D/g, ''));props: [ 'value' ],
provide() {
return {
radioGroup: this,
};
},props: [ 'value' ],
inject: [ 'radioGroup' ],<input
type="radio"
:value="value"
:checked="radioGroup.value === value"
@change="radioGroup.$emit('input', value)"
>props: [ 'modelValue' ],
emits: [ 'update:modelValue' ],
setup(props, { emit }) {
provide('radioGroupValue', computed({
get: () => props.modelValue,
set: v => emit('update:modelValue', v),
}));
},props: [ 'value' ],
setup() {
return {
radioGroupValue: inject('radioGroupValue'),
};
},<input
type="radio"
:value="value"
v-model="radioGroupValue"
>Vue cannot detect the following changes to an array <...> When you directly set an item with the index
filterRS.filter_range_value = [ selected_start, selected_end ];v-model один массив и для select'ов и для range'а, без необходимости заниматься ручной синхронизацией. А там, где значения надо представить в человекопонятном виде, это можно делать через вычисляемое свойство - например, так.
.highlight {
color: white;
background: red;
}methods: {
highlightNames: str => str.replace(/(?<=^|\s)@\S+/g, '<span class="highlight">$&</span>'),
},<div v-html="highlightNames(item.text)"></div>
отфильтровать массив по введенному значению в строке поиска в watch-ере
computed: {
filteredProjects() {
const search = this.searchString.toLowerCase();
return this.journal.flatMap(n => {
return n.savedProjects.filter(m => m.name.toLowerCase().includes(search));
});
},
...const circles = reactive(Array.from({ length: 10 }, () => {
const size = `${50 + Math.random() * 50 | 0}px`;
return {
left: `${Math.random() * window.innerWidth | 0}px`,
top: `${Math.random() * window.innerHeight | 0}px`,
width: size,
height: size,
};
}));
function onMouseMove({ pageX, pageY }) {
circles.forEach(n => {
const angle = Math.atan2(-pageX + parseInt(n.left), pageY - parseInt(n.top));
n.transform = `translate(-50%, -50%) rotate(${angle}rad)`;
});
}
onMounted(() => document.addEventListener('mousemove', onMouseMove));
onBeforeUnmount(() => document.removeEventListener('mousemove', onMouseMove));<div v-for="n in circles" :style="n" class="circle"></div>.circle {
position: absolute;
display: inline-block;
transform: translate(-50%, -50%);
box-sizing: border-box;
border: 10px solid silver;
border-bottom-color: black;
border-radius: 50%;
}<div class="img">
<img
v-if="
currentSort === tableHeader.name && currentSortDir === 'desc'
"
src="https://avatars.mds.yandex.net/i?id=2a00000179dddfd8448e981541c75114a166-4080640-images-thumbs&n=13"
alt=""
/>
<img v-else src="https://avatars.mds.yandex.net/i?id=f5c72675790756bfeb0dbe860b634778-5110698-images-thumbs&n=13" alt="" />
</div><div class="img" v-if="currentSort === tableHeader.influencerSync">
<img
:src="currentSortDir === 'desc'
? 'https://avatars.mds.yandex.net/i?id=2a00000179dddfd8448e981541c75114a166-4080640-images-thumbs&n=13'
: 'https://avatars.mds.yandex.net/i?id=f5c72675790756bfeb0dbe860b634778-5110698-images-thumbs&n=13'
"
/>
</div>