можно как-то, грубо говоря, весь изменяемый объект наверх посылать
@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>store.dispatch('заргузитьДанныеПользователя').then(() => {
new Vue({ ... });
});created() {
this.$store.dispatch('заргузитьДанныеПользователя');
},<div v-if="$store.state.данныеПользователя">
контент
</div>
<индикатор-загрузки v-else />Можно ли сохранять состояние одного компонента с разными входными данными
<li v-for="(val, key) in data" :some-data="key">{{ val }}</li>