Как связать объект с таблицей HTML в Vue. js, где его свойства создаются динамически?

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?

Answer 1

Вам нужно снова l oop над клавишами предмета. Это покажет все значения в объекте

<tbody>
 <tr v-for="item in Result.Data ">
  <td v-for="(value, key, index) in item">
    {{value}}
   </td>  
  </tr>
</tbody>

Если вы хотите отфильтровать некоторые из них, например, проверьте, что ключи являются действительными датами, вам нужно добавить v-if и использовать Дата .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

если вы хотите показать все атрибуты -> вы можете использовать это:

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

если вы хотите показывать все дни, вы можете использовать v-if и вычислить, чтобы завершить себя Fillter

  <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 не позволяет динамически добавлять новые реактивные свойства root -уровня к уже созданному экземпляру. Это я узнал из следующего поста.

vue. js не обновляет DOM после обновления массива

Спасибо всем !!!