data() {
return {
show: null,
...
@click="show = watch"
. Закрытие: @click="show = null"
. В шаблоне попапа исправляете watch на show: :src="`img/catalog/${show.model}/group.jpg`"
. data: () => ({
componentNames: [ 'comp1', 'comp2', 'comp3', 'comp4' ],
...
}),
computed: {
componentName() {
return [ 1, 2 ].includes(this.Q) && this.componentNames[this.B - 1];
},
},
<component :is="componentName"></component>
data: () => ({
components: [
{ name: '...', props: { ... } },
{ name: '...', props: { ... } },
...
],
...
}),
<component
v-if="component"
:is="component.name"
v-bind="component.props"
></component>
onClickOutside(e) {
if (!this.$el.contains(e.target)) {
// закрываем дропдаун
}
},
created() {
const { onClickOutside } = this;
document.addEventListener('click', onClickOutside);
this.$on('hook:beforeDestroy', () => document.removeEventListener('click', onClickOutside));
},
if(currentSlide == 2){
this.el.style.backgroundImage = ...
photos: {
Проблема явно в строке<li v-for="array in filterBy(arrays, input)">
Я взял вот этот листинг:
https://next.vuetifyjs.com/ru/components/lists
В консоли ошибка :
[Vue warn]: Unknown custom element
selectedServices() {
return this.services.reduce((acc, n) => (n.checked && acc.push(n.title), acc), []);
},
<ul>
<li v-for="n in selectedServices">{{ n }}</li>
</ul>
selectedServices() {
return this.services.filter(n => n.checked);
},
<ul>
<li v-for="n in selectedServices">{{ n.title }}</li>
</ul>
sum() {
return this.selectedServices.reduce((acc, n) => acc + n.cost, 0);
},
:filter="filterDebet"
.хочу фильтровать по нескольким значениям
data: () => ({
selected: null,
...
}),
<tr v-for="(n, i) in (selected || objSearch)">
@click="selected = selected ? null : { [i]: n }"
.hidden {
visibility: hidden;
}
<tr
v-for="(n, i) in objSearch"
:class="{ hidden: selected !== null && selected !== i }"
>
@click="selected = selected === null ? i : null"
overflow: scroll
или overflow-y: scroll
. computed: {
sum() {
return this.selected.reduce((acc, n) => acc + +n, 0);
},
},
<v-checkbox
class="light--text"
v-model="service.checked"
:label="`${service.cost} руб.`"
></v-checkbox>
computed: {
sum() {
return this.services.reduce((acc, n) => acc + n.cost * n.checked, 0);
},
},
computed: {
minStart() {
return Math.min(...this.competitors.map(n => n.start));
},
maxSpeed() {
return Math.max(...this.competitors.map(n => n.speed));
},
},
<tr v-for="{ start, speed } in competitors">
<td :class="{ best: start === minStart }">{{ start }}</td>
<td :class="{ best: speed === maxSpeed }">{{ speed }}</td>
</tr>
<yandex-map
ref="map"
...
<button
@click="$refs.map.myMap.balloon.open(координаты, содержимое)"
...
Начал изучать VueJS. Читал документацию очень много и долго.
new Vue.component
user() {
return new Proxy(this.$store.state.user, {
set: (target, prop, value) => {
this.$store.commit('updateUser', { [prop]: value });
return true;
},
});
},
updateUser(state, payload) {
Object.assign(state.user, payload);
},