Javascript Vue.js:组件中的默认数据始终由v-with覆盖

我有一个包含下拉组件的语言选择器视图。我想在下拉组件中设置一个默认属性（

isOpen

），然后包括语言选择器中的计算数据，这些数据随后显示在下拉列表中

然而，我似乎无法找到一种方法来定义下拉组件中的

isOpen

，而不被语言选择器中的新数据覆盖

以下是文件：

language-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）：

最后是下拉模板（index.html）：

这里是下拉组件的$data的输出（缺少

isOpen

）：

：

v-with还可以与

v-with=“childProp:parentProp”

形式的参数一起使用。这意味着将

parent[parentProp]

作为

child[childProp]

---

基本上，通过使用

v-with

覆盖所有子组件的数据。您应该使用指令的第二种形式指定要覆盖的属性。

谢谢，我过了一会儿才谈到这个问题。不幸的是，似乎没有一种干净的方法可以仅在父密钥与子密钥相同的情况下将子数据替换为父数据并保留其余数据。是的，我想我同意你的看法。我可能建议将此作为GitHub上的一项功能。

<div v-component="ui-dropdown" v-with="dropdown"></div>

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
    }
}

<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>