если я ставлю параметр :interval="100", то у меня появляется черная полоса под слайдером и все начинает очень лагать
methods: {
marks: v => !(v % 20000),
...
<vue-slider
:marks="marks"
...
<apexchart
ref="chart"
...
mounted() {
this.$nextTick(() => {
this.$refs.chart.hideSeries('здесь имя набора данных, который не хотите показывать');
});
},
Components can recursively invoke themselves in their own template. However, they can only do so with the name
option
app.directive(directives);
почему-то в данные изменение попадает только после nextTick'а (т.е. когда что-то побуждает родительский компонент перерисоваться)
Важное замечание о времени регистрации ссылок: поскольку ссылки создаются render-функцией, вы не сможете использовать их при первичной отрисовке — на тот момент они ещё не существуют! Кроме того, объект $refs не является реактивным, поэтому не стоит пытаться использовать его в шаблонах для связывания данных.
const appSingle = new Vue({
.planslider-enter-from {
.planslider-leave-from {
<transition-group tag="div" class="single-estate-planimetry__slider" name="planslider" appear> <div v-if="index === currentPlanimetry" :data-index="index" class="single-estate__descr-img" v-for="(item, index) in planimetry" :key="item.nome">
transition-group
на transition
. Убрать v-if
и v-for
. Сделать вычисляемое свойство, представляющее текущий элемент. transition
на transition-group
, сдвигаем его влево на ширину слайда; показываем слайды не с активного, а с предшествующего активному; чтобы не видеть, как первый слайд, ставший последним, уезжает в конец, задаём слайдам z-index
. Вот говнокод. <div class="error" v-if="$v.forms.additional.$dirty && $v.forms.additional.$invalid">
additional: this.visible ? { required } : {},
data() {
return {
selectedValue: this.initialValue,
};
},
set(val) {
this.$emit('input', val);
},
mounted() { console.log(this.props)
onClick : () => { console.log(this.props);
<transition-group name="slide" tag="div" class="table-body">
<div class="table-tr" v-for="item in items" :key="item.id">
<div class="table-td">{{ item.id }}</div>
<div class="table-td">{{ item.user }}</div>
</div>
</transition-group>
.table-tr {
transition: 0.5s;
}
.table-body {
overflow: hidden;
}
.slide-enter-from {
transform: translateY(-100%);
}
.slide-enter-to {
transform: translateY(0);
}