如何将对象绑定到 Vue.js 中的 HTML 表，并动态创建其属性？

Question

我正在使用 vue.js 库进行前端开发。

我遇到过一个场景，我的 JavaScript 方法返回一个列表，其中包含对象，对象的属性数量每次在方法执行后都会发生变化。

例如，我的列表可以在 2 个不同的执行中包含这些类型的对象。
var obj = {            Name : "John",            2020-Jan:  1,            2020-Jul:  2 }

var obj = {            Name: "John",            2020-Jan: 1,            2020-Jul: 2,            2021-Jan: 3,            2021-Jul: 4 }

由于属性名称是动态变化的，有什么方法可以绑定到 HTML 吗？

 <div >

    <table>

        <thead>

            <tr>

                <th v-for ="row in Result.Headers">

                {{row}}

                </th>

            </tr>

        </thead>

        <tbody>

            <tr v-for="item in Result.Data ">

                 <td>

                    {{item.2020-Jan}}       // Because don't know the number of properties until run time

                </td>                   // No of <td/>'s can change on no of properties. 

                 <td>                   // exactly don't know how many <td>'s needed there.

                    {{item.2020-Jul}}

                </td> <td>

                    {{item.2021-Jan}}

                </td>

            </tr>

        </tbody>

    </table>

</div>

有没有办法将这些类型的对象绑定到 vue.js 中的 fronted ？

Answer 1

您需要再次循环该项目的键。这将显示对象中的所有值<tbody>&nbsp;<tr v-for="item in Result.Data ">&nbsp; <td v-for="(value, key, index) in item">&nbsp; &nbsp; {{value}}&nbsp; &nbsp;</td>&nbsp;&nbsp;&nbsp; </tr></tbody>如果您想过滤其中一些，例如检查键是否是有效日期，您需要添加 av-if并使用Date.parse来检查这一点。<tbody>&nbsp;<tr v-for="item in Result.Data ">&nbsp; <td v-for="(value, key, index) in item" v-if="Date.parse(key) !== NaN">&nbsp; &nbsp; {{value}}&nbsp; &nbsp;</td>&nbsp;&nbsp;&nbsp; </tr></tbody>

Answer 2

如果你想显示所有 attr-> 你可以使用这个：&nbsp; &nbsp; <ul v-for="item in Result ">&nbsp; &nbsp; &nbsp; <li v-for="(value,key,index) in item">{{value}}</li>&nbsp; &nbsp; </ul>如果你想整天展示你可以使用 v-if 和计算来完成你自己的填充&nbsp; <div id="app">&nbsp; &nbsp; &nbsp; <ul v-for="item in Result" >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li v-for="(value,key,index) in item" v-if="canShow(key)"> index：{{index}}------ key: {{key}} ------ value：{{value}} </li>&nbsp; &nbsp; &nbsp; </ul>&nbsp; </div><script>&nbsp; &nbsp; var&nbsp; vue=new Vue({&nbsp; &nbsp; &nbsp; &nbsp; el:'#app',&nbsp; &nbsp; &nbsp; &nbsp; data:{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Result:[{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name: 'SkyManss',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 2020-Jan: 1,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 2020-Jul: 2&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name: 'SkyManss2',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 2020-Jan: 1,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 2020-Jul: 2,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 2021-Jan: 3,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 2021-Jul: 4&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }]&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; computed:{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; canShow(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return function(skey){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return skey.indexOf('-') > -1;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp;&nbsp; &nbsp; });</script>

Answer 3

经过一些研究和你的一些建议后，我找到了答案。 <div>    <table>        <thead>            <tr>                <th v-for ="row in Result.Headers">                {{row}}                </th>            </tr>        </thead>        <tbody>            <tr v-for="item in  Result.Data ">                <td v-for="row in Result.Headers">                    {{item[row]}}                </td>            </tr>        </tbody>    </table></div>JavaScript 代码this.Result.Headers =  Object.keys(result.data[0]);this.Result.Data    =  result.data;但这段代码只在第一次有效。第二次数据没有更新。所以我将 JavaScript 代码更新为以下代码。 Vue.set(self.Result, 'Headers', []); Vue.set(self.Result, 'Result', []); this.Result.Headers =  Object.keys(result.data[0]); this.Result.Data    =  result.data;Vue 不允许向已创建的实例动态添加新的根级响应式属性。