角度/Vue。js在同一指令中循环两个对象

Question

我不知道我想做的是否可能。我正在尝试创建一个Angular指令，该指令在数据对象上重复并打印出其值以及具有类似结构的第二个不相关对象的值。

我正在开发一个翻译应用程序，其中语言文件的主版本显示在一列中，翻译显示在下一列中。我想通过主对象重复，然后在有翻译的地方显示翻译。我不想合并这两个对象，因为我更喜欢在翻译对象和DOM之间保持双向绑定，以便可以轻松保存。

这正是我想做的：

目标

var master: {
    face: {
        a: aaa,
        b: bbb,
        c: ccc,
        more: {
            d: ddd,
            e: eee
        }
    },
    magic: magic,
    test: test
}

var translation: {
    face: {
        c: cccc,
        more: {
            d: dddd
        }
    },
    test: testttt
}

DOM输出

<ul>
    <li>
        face
        <ul>
            <li>
                <div>aaa</div>
                <div></div>
            </li>
            <li>
                <div>bbb</div>
                <div></div>
            </li>
            <li>
                <div>ccc</div>
                <div>cccc</div>
            </li>
            <li>
                more
                <ul>
                    <li>
                        <div>ddd</div>
                        <div>dddd</div>
                    </li>
                    <li>
                        <div>eee</div>
                        <div></div>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <div>magic</div>
        <div></div>
    </li>
    <li>
        <div>test</div>
        <div>testttt</div>
    </li>
</ul>

我作为一个Angular问题来问这个问题，但是我计划使用vue.js。我这样做是因为Angular社区更大，因为我相信从Angular学到的概念可以很容易地移植到vue.js上。我不想使用Angular本身，因为一个完整的框架远远超出了我的需要。

将对象vue.js为树的代码示例

以下是该项目的存储库：https://github.com/jdwillemse/translation-utility

Answer 1

如果您使用< code>ng-repeat="(key，value) in master"就可以

然后你可以简单地做：

< code > { { translation[key]} }

这个问题回答了如何做键值循环的基础。

这也是在安建一棵树

我没有用过Vue.js，但是你应该可以通过使用key，value looping和嵌套key value loops在里面来做到这一点。

这是Vue等价物：

在Vue中，我不确定的是您是否可以在DOM中访问[]符号。您想要＜code＞｛｛translation〔$key〕｝＜/code＞，但不确定是否可以在Vue中访问这样的数据。你可以有角度。