Vue.js: данные по умолчанию в компоненте всегда переопределены с помощью v-with

Question

У меня есть представление выбора языка, которое включает выпадающий компонент. Я хочу установить свойство default (isOpen) в раскрывающемся компоненте, а затем включить вычисленные данные из селектора языков, который затем отображается в раскрывающемся списке.

Тем не менее, я не могу найти способ определить 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):

Answer 1

From the VueJS Guide:

v-with также может использоваться с аргументом в форме v-with="childProp: parentProp". Это означает, проходя вниз parent[parentProp] к ребенку как child[childProp]

В основном вы перекрывая все данных дочернего компонента с помощью v-with. Вместо этого вы должны указать, какие свойства переопределить, используя вторую форму директивы.