data: () => ({
selected: null,
items: [
{ title: 'hello, world!!', value: '' },
{ title: 'fuck the world', value: '' },
{ title: 'fuck everything', value: '' },
],
}),
<div v-for="n in items">
<label>
<input type="radio" :value="n.title" v-model="selected">
{{ n.title }}
</label>
<input type="text" v-model="n.value" :disabled="selected !== n.title">
</div>
.fade-leave-active {
transition: opacity 1s;
}
.fade-leave-to {
opacity: 0;
}
mounted() {
this.show = false;
},
this.articles
- это не массив, у массивов метод push есть. Изначально да - массив, но когда вы в created
вызываете getArticles
, производится перезапись свойства. Неплохо было бы разобраться, что на самом деле возвращает запрос на получение статей - уж не объект ли?Да, не массив, а объект. Я просто и так и так пробовал. Смог добавить таким способом.
this.articles = Object.assign(this.articles, response.data.payload);
Но значение добавилось не так как нужно.
Object.assign
модифицирует первый аргумент, а не создаёт новый объект.v-for
(как и методы - forEach
, map
, ...) не будет его обрабатывать. Доставайте из объекта массив значений и уже его элементы добавляйте в articles
:this.articles.push(...Object.values(response.data.payload));
getArticles
можно просто заменить один массив другим:this.articles = Object.values(response.data.payload);
articles
на пустой объект, а в getArticles
по получении данных просто выполняйте присваивание: this.articles = response.data.payload
. А там, где пытаетесь concat
выполнить, создавайте новый объект, в который будут копироваться свойства существующего и результат запроса:this.articles = { ...this.articles, ...response.data.payload };
// или
this.articles = Object.assign({}, this.articles, response.data.payload);
marker.on('popupopen', function(e) {
new Vue({ el: e.popup._contentNode });
});
this.timeout = setTimeout(...
beforeRouteLeave(to, from, next) {
clearTimeout(this.timeout);
next();
},
Документация прочитана, наверно не настолько внимательно, чтобы понять
check-in-changed
и check-out-changed
.filters: [
{ name: 'calculator.brand_filter', getter: obj => obj.brand.name, value: '' },
{ name: 'calculator.company_filter', getter: obj => obj.company.name, value: '' },
{ name: 'calculator.country_filter', getter: obj => obj.brand.country, value: '' },
{ name: 'calculator.side_filter', getter: obj => obj.sides, value: '' },
],
computed: {
filteredProfiles() {
return this.filters.reduce((profiles, { value, getter }) => {
return value
? profiles.filter(n => getter(n) === value)
: profiles;
}, this.profiles);
},
Vue.component('filter-select', {
props: [ 'name', 'options', 'value' ],
template: `
<div>
<p>{{ name }}<p>
<select :value="value" @change="$emit('input', $event.target.value)">
<option value="">-</option>
<option v-for="n in options">{{ n }}</option>
</select>
</div>`
});
computed: {
filterOptions() {
return this.filters.map(n => [...new Set(this.profiles.map(n.getter))]);
},
<filter-select
v-for="(n, i) in filters"
v-model="n.value"
:options="filterOptions[i]"
:name="trans(n.name)"
></filter-select>
methods: {
resetFilters() {
this.filters.forEach(n => n.value = '');
},
<button @click="resetFilters">{{ trans('calculator.reset_filter') }}</button>
<select v-model="brand" class="custom-select">
filteredProfiles() {
return this.profiles.filter(n => n.brand.name === this.brand);
},
<div v-for="profile in filteredProfiles" class="row feed">
:license="{
old_price: 20,
price: 200,
title: 2,
}"
<option v-for="brand in brands" :value="brand">{{ brand }}</option>
computed: {
brands() {
return [...new Set(this.profiles.map(n => n.brand.name))];
},
},
const router = new VueRouter({
routes: [
{ path: '/', component: { template: '<div>Home</div>' } },
{ path: '/foo', component: { template: '<div>Foo</div>' } },
{ path: '/boo', component: { template: '<div>Boo</div>' } },
],
});
new Vue({
router,
el: '#app',
data: () => ({
routeIndex: 0,
}),
created() {
setInterval(() => {
const { routes } = this.$router.options;
this.routeIndex = (this.routeIndex + 1) % routes.length;
this.$router.push(routes[this.routeIndex]);
}, 1000);
},
});
<div id="app">
<router-view></router-view>
</div>
if (!this.map) {
this.map = DG.map(...);
this.marker = DG.marker(...);
} else {
this.map.panTo(...)
this.marker.setLatLng(...);
}
Через обертку <div class="container-avatar"><Avatar/></div>
- в этом варианте лишний html елемент
<div v-for="item in flightsData">
<div>Price: {{ item.price }}</div>
<div v-for="f in item.flights">
<div>Departure: {{ f.cities.departureCity }}, {{ f.departureTime }}</div>
<div>Arrival: {{ f.cities.arrivalCity }}, {{ f.arrivalTime }}</div>
</div>
</div>
this.flightsData = response.data.filter(n => val.includes(n.flights[0].airline.code));