在VUE中v-if 使用 filters 过滤符号报错的

436 阅读1分钟

黎明即起,醒后勿粘恋。

背景

根据数据的类型对数据做处理,首先想到的是用v-if + filters(过滤符)对数据类型做判断,之后再处理数据,判断如果数据是字符串的时候就直接赋值,如果是数组的话就做for循环处理! 想法个人感觉思路是对的,但是现实piapia打脸,首先如此写完之后会报错.

第一种方法代码如下:

<template slot-scope="scope">
    <p v-if="scope.row.exchangeDate | judgeType">{{scope.row.versionDesc}}</p>
    <p v-else v-for="(item,index) in scope.row.versionDesc" :key="index">{{item}}</p>
</template>

<script>
  filters: {
    judgeType(val) {
      return typeof val !== 'object';
    }
  }
</script>

报错信息:

[Vue warn]: Property or method "judgeType" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: [https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties]

资质愚钝,翻阅各大资料,没看懂个因为所以,还是要看书看文档啊!!!

处理方法

换个思路做处理,将filters的处理方式改为methods的方法处理,方式如下

第二种方法代码如下:

<template slot-scope="scope">
    <p v-if="judgeType(scope.row.exchangeDate)">{{scope.row.versionDesc}}</p>
    <p v-else v-for="(item,index) in scope.row.versionDesc" :key="index">{{item}}</p>
</template>

<script>
  methods: {
    judgeType(val) {
      return typeof val !== 'object';
    }
  }
</script>

方法搞定,满足我目前的需求,继续研究第一种思路为什么回报错,如果有大神看见,请为菜鸟解惑!!!