JavaScript
- 2441 ответ
- 0 вопросов
3610
Вклад в тег
{ имя_диалога: состояние }
. Тогда при обновлении состояния диалогов не будет необходимости обращаться к ним поимённо:mutations: {
dialogShow: (state, payload) => Object.assign(state.modals, payload),
},
modals() {
return new Proxy(this.$store.state.modals, {
set: (target, prop, value) => {
this.$store.commit('dialogShow', { [prop]: value });
return true;
},
});
},
<el-button @click="modals.dialogSignIn = true">sign in</el-button>
<el-dialog :visible="modals.dialogSignIn" @close="modals.dialogSignIn = false">
<span slot="footer" class="dialog-footer">
<el-button @click="modals.dialogSignIn = false">Закрыть</el-button>
</span>
</el-dialog>
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>
export default {
render(h) {
return h('ul', this.$slots['list-item'].map(n => h('li', [ n ])));
},
};
components: {
SlotWrapper: {
functional: true,
render: (h, context) => context.props.node,
},
},
<li v-for="n in $slots['list-item']">
<slot-wrapper :node="n"></slot-wrapper>
</li>
{ user: { city: { name: "..." } } }
, а будет { userCityName: "..." }
или { user_city_name: "..." }
, как-то так.