如何将对象绑定到 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>

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

  <td v-for="(value, key, index) in item">

    {{value}}

   </td>  

  </tr>

</tbody>

如果您想过滤其中一些，例如检查键是否是有效日期，您需要添加 av-if并使用Date.parse来检查这一点。

<tbody>

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

  <td v-for="(value, key, index) in item" v-if="Date.parse(key) !== NaN">

    {{value}}

   </td>  

  </tr>

</tbody>

Answer 2

如果你想显示所有 attr-> 你可以使用这个：

    <ul v-for="item in Result ">

      <li v-for="(value,key,index) in item">{{value}}</li>

    </ul>

如果你想整天展示你可以使用 v-if 和计算来完成你自己的填充

  <div id="app">

      <ul v-for="item in Result" >

          <li v-for="(value,key,index) in item" v-if="canShow(key)"> index：{{index}}------ key: {{key}} ------ value：{{value}} </li>

      </ul>

  </div>

<script>

    var  vue=new Vue({

        el:'#app',

        data:{

            Result:[{

                name: 'SkyManss',

                2020-Jan: 1,

                2020-Jul: 2

            },{

                name: 'SkyManss2',

                2020-Jan: 1,

                2020-Jul: 2,

                2021-Jan: 3,

                2021-Jul: 4

            }]

        },

        computed:{

          canShow(){

            return function(skey){

                return skey.indexOf('-') > -1;         

            }     

          }

        }   

    });

</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 不允许向已创建的实例动态添加新的根级响应式属性。