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, +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 и подтянуть основы?