Angular/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 本身，因为一个完整的框架远远超出了我的需要。

Code example vue.js 将对象重新渲染为树

这里是项目的仓库：https://github.com/jdwillemse/translation-utility

Answer 1

你可以，如果你使用ng-repeat="(key, value) in master"

那么你可以简单地做：

{{translation[key]}}

This question 回答了如何进行键值循环的基础知识。

This is also building a tree in Ang

我没有用过 Vue.js，但是你应该可以通过使用键、值循环和在里面嵌套键值循环来做到这一点。

这是 Vue 的等价物：

<ul id="repeat-object"> <li v-repeat="primitiveValues">{{$key}} : {{$value}}</li> <li v-repeat="objectValues">{{$key}} : {{msg}}</li> </ul>

我不确定在 Vue 中是否可以访问 DOM 中的 [] 符号。你想要{{translation[$key]}}，不确定你是否可以在 Vue 中访问这样的数据。你可以在 Angular 中。