vue中如何批量的通过数据来 增加／删除 class

Question

需求：一个有很多(面板，结构都不同，总之就是不方便用v-for)信息的页面，其中没有的数据显示灰色的‘暂无数据’(不知道哪些数据是没有的)

我起初是在接到后端返回数据后这样做的：

<template>
  <div id="app">
    <headerInfo :xmlData="headerInfo"></headerInfo>
  </div>
</template>

// export default
data() {
  return {
    headerInfo: {
      name: undefined,
      // ……
    },
    NO_DATA: '暂无信息',
  };
},
// ……
methods: {
  // ……
  turnHeaderInfo(data) {
    Object.keys(this.headerInfo).forEach((e) => {
      this.headerInfo[e] = data[e] || this.NO_DATA;
    })
  },
},

然后我在子组件中这样用

<p class="title">{{ xmlData.name }}</p>

export default {
  props: ['xmlData'],
  data () {
    return {

    };
  },
}

假设name没有数据，那么这样就不方便给该元素加.no-data使其变成灰色。
这里有什么方法可以批量的，或者有一个公共的方法判断，如果字段为空就自动改渲染该字段的加class

后来我又在全局注册了一个turnNoData的filter,将父组件的method改了下

// main.js
Vue.filter('turnNoData', function (val) {
  if (!val) {
    return '暂无数据';
  }
  return val;
})

// App.vue
methods: {
  // ……
  turnHeaderInfo(data) {
    Object.keys(this.headerInfo).forEach((e) => {
      this.headerInfo[e] = data[e];
    })
  },
},

// childComponent
<p class="title" :class="{ 'no-data': !xmlData.name }">
    {{ xmlData.name | turnNoData }}
</p>  

但是该页面数据有点多，而且我不知道哪些字段有数据哪些没有，这样的话，就需给每个需要渲染的字段加class判断和过滤，感觉敲级麻烦啊，是我的思路有问题吗？应该怎样解决?