<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>В компоненте так же прописано удаление "EventListener", но так как компонент сохраняет своё состояние (keep-alive), данный метод не удаляет "слушателя скролла".
выводить содержимое данного тега в консоль...
<li v-for="n in items" @click="onClick(n)">
{{ n.message }}
</li>methods: {
onClick(item) {
console.log(item.message);
}
}...или в какой-то блок
<li v-for="n in items" @click="$emit('select', n)">
{{ n.message }}
</li><b-list @select="selected = $event"></b-list>
<div v-if="selected">{{ selected.message }}</div>data: () => ({
selected: null,
...
})shower[index] = !shower[index]$set(shower, index, !shower[index])data: () => ({
items: [
{ name: '...', show: false },
{ name: '...', show: false },
...
],
...
}),<span @click="item.show = !item.show">{{ item.name }}</span>
<div class="dialog_show" v-if="item.show">{{ index }}</div>switch = !switchпроисходит рендеринг двух разных списков
<transition name="fade">transition-group.<li v-for="elements in myData" v-if="elements.key == getKey()">