beforeMount() { // какой тут хук использовать? const fields = ['input1', 'input2'] fields.forEach(item => this[item] = '') // я правильно добавляю в this, а не в this.$data? }
Объект с данными, над которым экземпляр Vue осуществляет наблюдение. Экземпляр проксирует сюда вызовы своих полей. (Например,vm.a
будет указывать наvm.$data.a
)
Vue не может обнаружить добавление или удаление свойства. Так как Vue добавляет геттер/сеттер на этапе инициализации экземпляра, свойство должно присутствовать в объектеdata
для того чтобы Vue преобразовал его и сделал реактивным.
<...>
Во Vue нельзя динамически добавлять новые корневые реактивные свойства в уже существующий экземпляр.
data: () => ({
inputs: Array(20).fill(''),
}),
<div v-for="(n, i) in inputs">
Значение #{{ i }}:
<input v-model="inputs[i]">
{{ n }}
</div>
<input type="date" v-model="years.start">
<input type="date" v-model="years.end">
<div v-for="n in months">
<h3>{{ n.year }}, {{ n.name }}</h3>
<div>{{ n.days }}</div>
</div>
data: () => ({
years: {
start: null,
end: null,
},
}),
computed: {
months() {
const start = moment(this.years.start).startOf('month');
const end = moment(this.years.end).endOf('month');
const months = [];
for (; start < end; start.add(1, 'day')) {
const [ year, name, day ] = start.format('YYYY.MMMM.D').split('.');
if (day === '1') {
months.push({
year,
name,
days: [],
});
}
months[months.length - 1].days.push(+day);
}
return months;
},
},
отследить появление содержимого блока
<app-analytics-chart v-if="analytics.countOrdersByMonth"
data: () => ({
image: 0,
images: [ 'раз картинка', 'два картинка', 'три картинка' ],
}),
<button v-for="(n, i) in images" @click="image = i">
Показать картинку #{{ i }}
</button>
<transition name="image" mode="out-in">
<img :key="image" :src="images[image]">
</transition>
.image-enter-active,
.image-leave-active {
transition: opacity .3s;
}
.image-enter,
.image-leave-to {
opacity: 0;
}
Вариант добавить в лоб, как я сделал это выше class='test', не сработал.
Этот класс применился к input. А мне нужно применить класс к самому select, который появляется перед закрывающим тегом body.
@click="openModal(message)"
data: () => ({
openedMessage: {},
...
}),
methods: {
openModal(message) {
this.openedMessage = message;
this.showMessageModal = true;
},
...
},
<span class="box-title">{{ openedMessage.какоеТамУВасСвойствоОтвечаетЗаЭтотTitle }}</span>
...
<div class="box-body">{{ openedMessage.нуТутТожеВамВиднееЧтоНаписать }}</div>
Vue cannot detect the following changes to an array <...> When you directly set an item with the index
this.terain[x][y] = Number(this.cursorBlock)
this.$set(this.terain[x], y, Number(this.cursorBlock))
Код компонента где хранятся все посты:
@click="addPostToHistoryComp(post.id, post.title, post.body)"
paginatedData() { const start = this.page * 6;
addPostToHistoryComp(val){ this.$store.dispatch('transforPostToHistoryComp', { pTitle: val.post.title,
<li v-for="(historyPost, index) in historyPosts" class="post" :key="index"> <img src="src/assets/nature.jpg"> <p class="boldText"> {{ post.title }}</p>
const todohistory = { title: payload.pTitle, body: payload.pBody, id: payload.pId } commit('ADD_TODO_HISTORY', todo)
ADD_TODO_HISTORY (state, todohistoryObject) { state.historyPosts.unshift(todoObject) },
<button v-for="(n, i) in items" @click="onClick(i)">{{ n }}</button>
methods: {
onClick(index) {
this.items = this.items.slice(0, index + 1);
// или
// this.items.splice(index + 1, this.items.length - index);
},
...
},
computed: {
namesFilter() {
const name = this.name_from.toLowerCase();
const names = this.names;
const filterBy = [ 3, 4 ];
return name
? names.filter(n => filterBy.some(i => n.children.item[i].value.toLowerCase().includes(name)))
: names;
},
},
filterBy
свойством компонента, привязать его содержимое через v-model
к, например, чекбоксам, и вот уже пользователь может настраивать фильтрацию по произвольному количеству свойств.