Question

我在过滤器中找到了线索。

模板：

<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

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

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

Answer 2

除了@adiga建议之外，对于检查组件中数据的方法，通常应优先选择computed properties而不是方法，因为它们性能更高，并且仅在某些依赖项更改时才调用：

...

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);
     }
  }

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

2 个答案: