У меня есть представление выбора языка, которое включает выпадающий компонент. Я хочу установить свойство default (isOpen
) в раскрывающемся компоненте, а затем включить вычисленные данные из селектора языков, который затем отображается в раскрывающемся списке.Vue.js: данные по умолчанию в компоненте всегда переопределены с помощью v-with
Тем не менее, я не могу найти способ определить isOpen
в раскрывающемся списке без его переопределения новыми данными из селектора языков.
Вот файлы:
языка selector.js
var model = require('model/language');
var uiDropdown = require('ui/dropdown');
var template = require('./index.html');
var vm = new Vue({
template: template,
components: {
'ui-dropdown': uiDropdown
},
created: function() { self = this; },
ready: init,
data: function(){ return model; },
computed: {
dropdown: {
get: function(){
return {
options: (function(){
return model.options.map(function(option){
return { id: option.id, label: option.code }
})
}())
, currentID: model.currentID
, type: uiDropdown.opt.types.SMALL
}
}
}
}
});
шаблон языка селектор (index.html):
<div v-component="ui-dropdown" v-with="dropdown"></div>
dropdown.js (с isOpen
, определенные в data
. Я также попытался определить его как в created
, так и в ready
крючках, но он тоже не работал):
var template = require('./index.html');
module.exports = {
template: template,
created: function() {
self = this;
},
ready: init,
methods: {
onSelect: onSelect,
onOpen: onOpen
},
data: function(){
return {
isOpen: false,
type: types.SMALL
}
},
computed: {
currentLabel: {
get: function(){
var selectedModel = filterSelected(self.$data, self.$data.currentID);
return self.$data.options[self.$data.currentID].label;
}
}
},
opt: {
types: types
}
}
И, наконец, шаблон выпадающего (index.html):
<div class="dropdown {{ isOpen ? 'dropdown__open' : ''}}" v-class="type">
<a v-on="click: onOpen" href="#" class="dropdown--label">
{{ currentLabel }} {{ options.isOpen }}
<span class="icon__dropdown"></span>
</a>
<ul class="dropdown--list">
<li v-repeat="option: options" class="{{ currentID == option.id ? 'dropdown--list__current' : '' }}">
<a v-on="click: onSelect" href="{{ option.id }}">
{{ option.label }}
</a>
</li>
</ul>
</div>
А вот выход $ данных компоненты ниспадающей (в котором отсутствует isOpen
):
Спасибо, я пришел к этому через некоторое время. К сожалению, похоже, что нет чистого способа заменить дочерние данные родительскими данными *, только если родительский ключ совпадает с родительским * и сохранить остальные. – nils
Да, я думаю, я согласен с тобой там. Я мог бы предложить это как функцию GitHub. – Miguel