@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, +this.cursorBlock);
// или
this.terain[x].splice(y, 1, this.cursorBlock | 0);Код компонента где хранятся все посты:
@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 к, например, чекбоксам, и вот уже пользователь может настраивать фильтрацию по произвольному количеству свойств.
function (response) { на (response) => {.axios(...).then(function(response) {
this.info = response.data;
}.bind(this));const that = this;
axios(...).then(function(response) {
that.info = response.data;
});methods: {
processResponse({ data }) {
this.info = data;
},
},
mounted() {
axios(...).then(this.processResponse);
},async mounted() {
try {
this.info = (await axios(...)).data;
} catch (e) {}
},data: () => ({
items: Array(10).fill(null),
...<ul>
<li v-for="(n, i) in items" :style="index < i || { color: n }">
{{ i }}
</li>
</ul>methods: {
next(color) {
const { index, items } = this;
this.index = index === items.length - 1 ? 0 : index + 1;
items.splice(this.index, 1, color);
},
...data: () => ({
colors: [ 'red', 'lime', 'blue', 'orange', 'magenta', 'aqua', 'yellow' ],
...<button v-for="c in colors" @click="next(c)">{{ c }}</button><span id="wrong"> в шаблоне компонента - а если экземпляров компонента будет несколько?), путаетесь с операторами - использовали побитовое ИЛИ там, где должно было быть логическое. Может, стоит подождать с vue и подтянуть основы?
data: () => ({
size: ...
}),
watch: {
size: {
immediate: true,
handler(val) {
fontSize(this.target, val);
},
},
},<input type="range" v-model="size">methods: {
onInput(e) {
fontSize(this.target, e.target.value);
},
},
mounted() {
this.$el.querySelector('input').dispatchEvent(new Event('input'));
},<input type="range" @input="onInput">
<input ref="datepicker" v-model="item.date">watch: {
items() {
this.$nextTick(() => {
this.$refs.datepicker
.filter(n => !n.classList.contains('hasDatepicker'))
.forEach(n => $(n).datepicker({
onSelect: () => n.dispatchEvent(new Event('input')),
}));
});
},
},<input v-datepicker v-model="item.date">Vue.directive('datepicker', {
inserted: el => $(el).datepicker({
onSelect: () => el.dispatchEvent(new Event('input')),
}),
});<v-datepicker v-model="item.date"></v-datepicker>Vue.component('v-datepicker', {
template: `<input :value="value" readonly="readonly">`,
props: [ 'value' ],
mounted() {
$(this.$el).datepicker({
onSelect: date => this.$emit('input', date),
});
},
});:src="`/img/${imgName}.jpg`":src="'/img/' + imgName + '.jpg'"computed: {
imgSrc() {
return `/img/${this.imgName}.jpg`;
},
},:src="imgSrc"methods: {
imgSrc: name => `/img/${name}.jpg`,
},:src="imgSrc(imgName)"