Приноровился к angular 2+
:ease="Elastic.easeOut.config(1, 0.75)"
$('#dateStart').trigger('change');
this.dispatchEvent(new Event('input'));
:curPage="defineCurPage"
:cur-page="defineCurPage"
. data: () => ({
newTask: '',
items: {},
}),
watch: {
items: {
deep: true,
handler: val => localStorage.setItem('items', JSON.stringify(val)),
},
},
methods: {
addTask() {
const title = this.newTask.trim();
if (title) {
const id = 1 + Math.max(0, ...Object.values(this.items).flat().map(n => n.id));
this.items.A.push({ id, title });
} else {
alert('Введите текст задачи');
}
this.newTask = '';
},
},
created() {
let items = null;
try {
items = JSON.parse(localStorage.getItem('items'));
} catch (e) {}
this.items = items || дефолтное значение;
},
<div>
<input placeholder="текст задачи" v-model="newTask">
<button @click="addTask">+</button>
</div>
<draggable
v-for="(v, k) in items"
v-model="items[k]"
:key="k"
:options="{ group: 'tasks' }"
element="ul"
class="connectedSortable"
>
<li v-for="item in v" :key="item.id">{{ item.title }}</li>
</draggable>
item.isShow = false;
this.$set(item, 'isShow', false);
data() {
return {
apiCopy: this.api.map(n => ({
...n,
requests: n.requests.map(m => ({
...m,
isShow: false,
})),
})),
};
},
Насколько хороши варианты:
1. интервалом синхронить стейт корзины.
2. Синхронить стейт при событии onunload
3. Писать обработчик кликов, который будет регулировать частоту запросов (очень не хочется)
methods: {
syncCart: debounce(function() {
...
}),
},
watch: {
'$store.state.cart': {
immediate: true,
deep: true,
handler: 'syncCart',
},
},
data: () => ({
items: [
{ раз_свойство: '', два_свойство: '', три_свойство: '', ... },
...
],
}),
<table>
<tbody>
<tr v-for="(n, i) in items">
<td>#{{ i + 1 }}</td>
<td v-for="(v, k) in n">
{{ k }}:
<input v-model="n[k]">
</td>
</tr>
</tbody>
</table>
next({
name: 'здесь имя маршрута, придумайте сами',
params: data,
})
this.$route.params
. Если надо, чтобы свойства params передавались в параметры компонента, также добавьте в описание маршрута props: true
. необходимо отлавливать событие скроллинга
что-то вроде $element.bind('mousewheel',
<div @wheel="onWheel" @scroll="onScroll">
methods: {
onWheel() {
console.log('wheel');
},
onScroll() {
console.log('scroll');
},
},
this.$set(this.arrB, i, 'значение')
с data-table vuetify она не работает
<v-data-table
ref="table"
...
table
:mounted() {
new ColumnResizer.default(this.$refs.table.$el.querySelector('table.v-datatable'), {
liveDrag: true,
draggingClass: 'rangeDrag',
gripInnerHtml: '<div class="rangeGrip"></div>',
minWidth: 8,
});
},
При изменении item.department меняется и item_loaded.department
this.item_loaded = this.item
this.item_loaded = { ...this.item }
data() {
return {
item_loaded: { ...this.item },
};
},
isChanged() {
return this.item_loaded.department !== this.item.department;
},
cannot read property of null
. Должен быть объект:default: () => ({ /* можно указать какие-нибудь свойства с дефолтными значениями */ }),
v-model="item.department"
). Правильно будет эмитить изменения в родительский компонент и обновлять объект уже там. В родителе цепляете значение для параметра item с модификатором sync, а в рассматриваемом компоненте v-model
заменяете на установку значения и обработку события input:<input
:value="item.department"
@input="$emit('update:item', { ...item, department: $event.target.value })"
>
:data="chartData"
computed: {
chartData() {
return this.$store.getters.filterManagersChart.map(n => ({
name: n,
data: 53,
}));
},
},
watch: {
measureSystem: {
immediate: true,
handler() {
// сюда переносите код из mounted - axios.get(...)
},
},
},
computed: {
measureSystem() {
return this.toggle === 1 ? 'metric' : 'Imperial';
},
},
<input @change="doSomethingWithValue" />
methods: {
doSomethingWithValue(e) {
const value = e.target.value;
...
<input @change="doSomethingWithValue($event, 'hello, world!!')" />