data: () => ({
...
activeComment: null
})<li v-for="comment in comments">
<textarea
@click="activeComment = comment"
:style="activeComment === comment ? active : passive"
></textarea>
</li>v-model. Можно сделать ещё один объект - с дефолтными значениями для input'ов, и просто копировать его содержимое в eventDefault после передачи данных в родительский компонент.const copy = Object.assign({}, original). Или так: const copy = { ...original }.
data: () => ({
newPhone: {},
...
}),<input v-model="newPhone.name">
<input v-model="newPhone.ssd">addPhone() {
this.phones.push(this.newPhone);
this.newPhone = {};
},<ul>
<li
v-for="(n, i) in items"
:data-rel="`ex-${i + 1}`"
@click="active = i"
>item #{{ i + 1 }}</li>
</ul>
<div
v-if="active !== null"
@mouseleave="active = null"
>{{ items[active] }}</div>data() {
return {
active: null,
items: [
'hello, world!!',
'fuck the world',
'fuck everything'
]
}
}data: () => ({
blocks: [
{
template: '<div><ul><li v-for="n in data" v-html="n"></li></ul></div>',
data: [
'<h2>Заголовок 1</h2><p>какой-то текст 1</p>',
'<h2>Заголовок 2</h2><p>какой-то текст 2</p>',
],
},
{
template: '<div><h3 v-for="color in data" :style="{ color }">{{ color }}</h3></div>',
data: [ 'red', 'green', 'blue' ],
},
{
template: '<div><p v-for="i in data">{{ i }}</p></div>',
data: 4,
},
],
}),Vue.component('block-component', {
props: [ 'template', 'data' ],
computed: {
compiled() {
return Vue.compile(this.template);
},
},
render() {
return this.compiled.render.call(this);
},
});<block-component v-for="n in blocks" v-bind="n"></block-component>const imageId = post.fields.image.sys.id.forEach((post) на .forEach((post, i), аthis.images.push(response.data.fields.file.url);this.$set(this.images, i, response.data.fields.file.url);:src="images[index]" будет :src="post.image", аthis.images.push(response.data.fields.file.url);this.$set(post, 'image', response.data.fields.file.url);data: () => ({
login: '',
password: '',
}),<input v-model="login" name="login" v-validate="{ not_in: password }">
<span v-if="errors.has('login:not_in')">Логин не должен совпадать с паролем</span>
<input v-model="password" name="password" v-validate="{ not_in: login }">
<span v-if="errors.has('password:not_in')">Пароль не должен совпадать с логином</span>@click="onClick"methods: {
onClick(e) {
console.log(e.target);
}
}data: () => ({
src: null,
}),
methods: {
onChange(e) {
const file = (e.target.files || e.dataTransfer.files)[0];
if (file) {
const reader = new FileReader();
reader.onload = () => this.src = reader.result;
reader.readAsDataURL(file);
}
},
},<input type="file" @change="onChange">
Пробовал указывать v-model="filter['name']" и вешать вотчер на filter, но этот вотчер срабатывает только при изменение ключей массива, но не значений. На изменение значений не реагирует.
deep: true в настройках watcher'а:watch: {
filters: {
deep: true,
handler(val) {
console.log(JSON.stringify(val, null, 2));
},
},
},с респонсом все впорядке
<...>
нехочет переиницыализировать плагин
watch: {
массивДанных() {
this.$nextTick(this.$redrawVueMasonry);
},
},v-if / v-else следует добавить элементам массива свойство, которое будет указывать на необходимость назначения класса. Так пойдёт?
{ user: { city: { name: "..." } } } , а будет { userCityName: "..." } или { user_city_name: "..." }, как-то так.
return itemData && monthData.return itemData || monthData.data: {
filters: {
'какое-то свойство': {
value: какое-то дефолтное значение,
compare: (itemValue, filterValue) =>
сравнение значений фильтра и элемента фильтруемого массива
},
...
},
...<input v-model="filters.xxx.value"><select v-model="filters.yyy.value">computed: {
filteredItems() {
return Object.entries(this.filters).reduce((items, [ key, filter ]) => {
return items.filter(item => filter.compare(item[key], filter.value));
}, this.items);
},
...<td v-for="(n, i) in row">
<input @keydown.tab="i === row.length - 1 ? onTab(n) : null">
</td><div v-for="n in 11">{{ n + 29 }}</div><div v-for="n in 40" v-if="n >= 30">{{ n }}</div><div v-for="n in values">{{ n }}</div>values: [ 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40 ],<div v-for="n in getValues(30, 40)">{{ n }}</div>getValues(lower, upper) {
return [...Array(upper - lower + 1)].map((n, i) => lower + i);
},