@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'а, без необходимости заниматься ручной синхронизацией. А там, где значения надо представить в человекопонятном виде, это можно делать через вычисляемое свойство - например, так.