computed: {
isFilledAll() {
return Object.values(this.user_inputs).every(n => n.isFilled);
},
},
isFilledAll() {
return Object.values(this.user_inputs).every(n => Object.values(n).every(m => m !== null));
}
findIndex(item => item.id = id)
Что стоит доизучить?
addToCart(state, id) {
state.cartItems.push(state.products.find(n => n.id === id));
},
addToCart: (state, product) => state.cartItems.push(product),
addToCart({ cartItems, products }, id) {
let product = cartItems.find(n => n.id === id);
if (!product) {
cartItems.push(product = {
...products.find(n => n.id === id),
quantity: 0,
});
}
product.quantity++;
},
как это правильно называется
div
с различными background-color
, один вложен в другой, у родительского ширина 100%, у дочернего - в зависимости от текущего значения. можно как-то, грубо говоря, весь изменяемый объект наверх посылать
@change="onChange"
methods: {
onChange(e) {
this.userProps[e.name] = e.val;
}
}
Это нормально...
...или можно как то его оставить что бы не рендерит по новой?
[] || this.$store.getters.getMyData()
всегда будет иметь своим значением пустой массив. Это первое. Второе - а что, ваш геттер действительно возвращает функцию? Или вы полагаете, будто его надо вызывать? Третье - если по вашей задумке значением myData может быть пустой массив, то почему вы работаете с myData как с объектом? Или, почему вы, зная, что нужен объект с определёнными свойствами, в качестве заглушки используете массив?myData() {
return this.$store.getters.getMyData || { list: [] };
},
<div id="app">
<textarea
v-model="title"
@keydown.enter.prevent
@keyup.enter="addItem"
></textarea>
<ul>
<li v-for="n in $store.state.items">{{ n.title }}</li>
</ul>
</div>
const store = new Vuex.Store({
state: {
items: Array.from('abcd', n => ({ title: n.repeat(3) })),
},
mutations: {
addItem: (state, item) => state.items.push(item),
},
});
new Vue({
el: '#app',
store,
data: () => ({
title: '',
}),
methods: {
addItem() {
const title = this.title.trim();
if (title) {
this.$store.commit('addItem', { title });
this.title = '';
}
},
},
});
infinite-scroll-distance
. Она задаёт расстояние от нижней границы прокручиваемого элемента, на котором должен сработать коллбек. Просто указываете сколько вам надо. data: () => ({
items: [
{ value: 69, title: 'hello, world!!', checked: false },
{ value: 187, title: 'fuck the world', checked: false },
{ value: 666, title: 'fuck everything', checked: false },
],
}),
computed: {
sum() {
return this.items.reduce((acc, n) => acc + n.value * n.checked, 0);
},
checkAll: {
get() {
return this.items.every(n => n.checked);
},
set(val) {
this.items.forEach(n => n.checked = val);
},
},
},
<div>
<label>
<input type="checkbox" v-model="checkAll">
CHECK ALL
</label>
</div>
<div v-for="n in items">
<label>
<input type="checkbox" v-model="n.checked">
{{ n.title }}
</label>
</div>
<div>SUM: {{ sum }}</div>
Это либо недоработка создателя компонента либо...
<pagination
:key="records"
...
computed: {
foundItems() {
return []
.concat(...this.items.map(n => n.props || []))
.filter(n => n.name.includes(this.search));
},
},
<li v-for="item in foundItems">
{{ item.name }}
</li>
locales: ['ru', 'en'], locale: 'ru',
{{ locales[locale]}}
v-for="(value, key) in locales"
@click.prevent="localizee(key)"
languages: [ 'en', 'ru' ]
<ul>
<li
v-for="lang in languages"
@click="selected = lang"
>
{{ lang }}
</li>
</ul>