找到更好的方法来查看对象是否已填充字段

Question

我在 Vue 中得到了过滤器。模板：<b-button v-if="filterFilled()" @click="clearFilter">    Clear</b-button>数据：data () {      return {        filter: {          price_from: '',          price_to: '',          surface_from: '',          surface_to: '',          floor: '',          type: '',          structure: '',        },      }    },我检查的方法是过滤器脏了：filterFilled(){        return (this.filter.price_from || this.filter.price_to || this.filter.surface_to || this.filter.surface_from ||          this.filter.floor || this.filter.type || this.filter.structure)      },这工作正常，但我的问题是，是否存在更好的方法来询问对象是否已填充道具？

Answer 1

您可以使用以下方法检查是否this.filter至少有一个truthy值some

filterFilled() {

  return Object.values(this.filter).some(v => v)

}

Answer 2

对于检查组件中数据的方法，您通常应该更喜欢计算属性而不是方法，因为它们的性能更高，并且仅在其某些依赖项更改时才调用：

...

data () {

      return {

        filter: {

          price_from: '',

          price_to: '',

          surface_from: '',

          surface_to: '',

          floor: '',

          type: '',

          structure: '',

        },

      }

    },

  computed: {

     filterFilled() {

       // as in @adiga answer, which is great

       return Object.values(this.filter).some(v => v);

     }

  }