methods: {
toggleElement(id) {
const index = this.selectedElArr.indexOf(id);
if (index !== -1) {
this.selectedElArr.splice(index, 1);
} else {
this.selectedElArr.push(id);
}
},
...
@click="toggleElement(data.id)"
@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' : '' ]")
span
const 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, ''));