v-if="false" view内部过滤器会执行 #334

fangxingguang · 2019-04-23T06:18:23Z

问题描述

false内的视图过滤器会被执行

复现步骤

{{news.update_time|formatDate}}

预期结果
不应该执行

实际结果
[Vue warn]: Error in render: "TypeError: Cannot read property 'replace' of undefined"

系统信息:

发行平台:微信小程序
HBuilderX版本 1.9.3

fxy060608 · 2019-04-23T06:20:10Z

目前版本会执行，后续会优化一下

alamhubb · 2019-10-28T03:16:59Z

模板内方法也会被执行

yinqiangw · 2019-10-31T10:00:35Z

有同样的问题, v-if 条件编译中存在过滤器, 必执行的, 这个 bug 让我头大

liuyingqq123 · 2019-11-01T13:47:40Z

这个bug真的太致命了, 坑也太大了, 快快解决吧, 要不这个东西就是废废, 根本就太不灵活了

ghost · 2019-11-02T03:23:24Z

这个bug真的太致命了, 坑也太大了, 快快解决吧, 要不这个东西就是废废, 根本就太不灵活了

为什么？

liuyingqq123 · 2019-11-04T08:25:40Z

这个bug真的太致命了, 坑也太大了, 快快解决吧, 要不这个东西就是废废, 根本就太不灵活了

为什么？

你试试这种情况:
list的接口不是单层json数组, 是类似这种[{a: {b: xxx}]
然后v-for中, 对{{ item.a.b|filter }}加一个过滤器, 当由于业务原因, 返回的某条记录, 是{ a: null }的时候, 是报错的, 那好, 我在{{ item.a.b|filter }}外层加个v-if="a是否为空"的判断好吧. 但像楼上说的
"v-if 条件编译中存在过滤器, 必执行的, 这个 bug 让我头大", 所以, 依然报错.
不要说什么让后台返回的格式适应前端这样的解决方案, 是根本就是框架的问题, 后台没有错.

ghost · 2019-11-04T08:30:01Z

这个bug真的太致命了, 坑也太大了, 快快解决吧, 要不这个东西就是废废, 根本就太不灵活了

为什么？

你试试这种情况:
list的接口不是单层json数组, 是类似这种[{a: {b: xxx}]
然后v-for中, 对{{ item.a.b|filter }}加一个过滤器, 当由于业务原因, 返回的某条记录, 是{ a: null }的时候, 是报错的, 那好, 我在{{ item.a.b|filter }}外层加个v-if="a是否为空"的判断好吧. 但像楼上说的
"v-if 条件编译中存在过滤器, 必执行的, 这个 bug 让我头大", 所以, 依然报错.
不要说什么让后台返回的格式适应前端这样的解决方案, 是根本就是框架的问题, 后台没有错.

执行后的致命原理是什么？

liuyingqq123 · 2019-11-12T09:27:57Z

这个bug真的太致命了, 坑也太大了, 快快解决吧, 要不这个东西就是废废, 根本就太不灵活了

为什么？

你试试这种情况:
list的接口不是单层json数组, 是类似这种[{a: {b: xxx}]
然后v-for中, 对{{ item.a.b|filter }}加一个过滤器, 当由于业务原因, 返回的某条记录, 是{ a: null }的时候, 是报错的, 那好, 我在{{ item.a.b|filter }}外层加个v-if="a是否为空"的判断好吧. 但像楼上说的
"v-if 条件编译中存在过滤器, 必执行的, 这个 bug 让我头大", 所以, 依然报错.
不要说什么让后台返回的格式适应前端这样的解决方案, 是根本就是框架的问题, 后台没有错.

执行后的致命原理是什么？

之前用vue的时候, 列表里的格式化逻辑, 都喜欢写在template里, 现在需要遍历添加了.
就是我举的那种情况编译完这个页是报错的. 现在的解决办法, 就是请求回来后, filter的方法, 得遍历返回的list添加, 组装成列表要的格式, 不够灵活, 性能也不好.

liumingchu · 2019-11-12T09:32:17Z

这个bug真的太致命了, 坑也太大了, 快快解决吧, 要不这个东西就是废废, 根本就太不灵活了

为什么？

你试试这种情况:
list的接口不是单层json数组, 是类似这种[{a: {b: xxx}]
然后v-for中, 对{{ item.a.b|filter }}加一个过滤器, 当由于业务原因, 返回的某条记录, 是{ a: null }的时候, 是报错的, 那好, 我在{{ item.a.b|filter }}外层加个v-if="a是否为空"的判断好吧. 但像楼上说的
"v-if 条件编译中存在过滤器, 必执行的, 这个 bug 让我头大", 所以, 依然报错.
不要说什么让后台返回的格式适应前端这样的解决方案, 是根本就是框架的问题, 后台没有错.

这样子试试：{{ item.a&&item.a.b|filter }} filter中对于不合法的参数也加个校验

ms2146 · 2019-12-16T04:46:59Z

同样的问题，这坑真是深

ms2146 · 2019-12-16T05:14:17Z

目前版本会执行，后续会优化一下

啥时候会优化呀，这都半年了

jaceechan · 2020-03-24T07:21:43Z

相同问题，请问有计划什么时候修复这个问题吗？

sonicsunsky · 2020-03-29T06:19:38Z

请问这个问题现在修复了吗，如果没解决的话有什么兼容的方法吗?

Cople · 2020-03-30T15:18:05Z

目前版本会执行，后续会优化一下

提了快 1 年了，这么明显的 Bug 还不修复？

leafiy · 2020-04-24T14:27:59Z

2020年4月底了，还没解决

jockiller · 2020-06-08T12:09:06Z

2020年6月8号，尚未解决

caixuhui · 2020-06-19T06:13:20Z

2020年6月19号，尚未解决

Robin-zero · 2020-07-27T17:20:57Z

2020年7月28号，尚未解决

zhetengbiji · 2020-08-01T07:58:23Z

CLI最新的alpha版有相关优化，可以将依赖更新到2.0.0-alpha-28320200727005后测试一下

wqscode · 2020-08-14T05:39:08Z

v-if="false" 是解决了不执行了， v-if="item.type==3" item.type的值是1 就报 Error in render: "TypeError: Cannot read property 'type' of undefined" 但是v-if="1==3"是可以的

zhetengbiji · 2020-08-14T06:01:04Z

v-if="false" 是解决了不执行了， v-if="item.type==3" item.type的值是1 就报 Error in render: "TypeError: Cannot read property 'type' of undefined" 但是v-if="1==3"是可以的

#2011

userTea · 2020-08-21T03:23:49Z

我曹终于修复了，牛皮。好

pursuccess · 2020-09-17T09:16:34Z

我曹终于修复了，牛皮。好

更新到最新版还是有这个问题。。。

zhetengbiji · 2020-09-17T09:17:35Z

我曹终于修复了，牛皮。好

更新到最新版还是有这个问题。。。

版本号多少，有没有示例

pursuccess · 2020-09-17T09:22:53Z

版本号多少，有没有示例

2.8.11.20200907

zhetengbiji · 2020-09-17T09:27:03Z

版本号多少，有没有示例

2.8.11.20200907

示例写法提供一下，可能有特殊情况未覆盖到，目前这边的已有的相关示例跑测试未发现问题

pursuccess · 2020-09-17T09:32:06Z

版本号多少，有没有示例

2.8.11.20200907

示例写法提供一下，可能有特殊情况未覆盖到，目前这边的已有的相关示例跑测试未发现问题

代码暂时贴不上来，就是很简单的一个for循环，最外层有做了数组存在的判断，里面的判断就是数组中数据对象的属性找不到，更新后才出的问题

zhetengbiji · 2020-09-17T09:38:10Z

版本号多少，有没有示例

2.8.11.20200907

示例写法提供一下，可能有特殊情况未覆盖到，目前这边的已有的相关示例跑测试未发现问题

代码暂时贴不上来，就是很简单的一个for循环，最外层有做了数组存在的判断，里面的判断就是数组中数据对象的属性找不到，更新后才出的问题

代码可以贴上来，你没使用插入代码段，我本来帮你编辑好了，又被你改掉了。。。
应该不是一个简单的for循环，这边自动化测试用的示例，简单的循环复杂循环示例都有，嵌套的也有，未发现类似问题

你再把代码贴一下，把对应的绑定数据也提供一下，我用来测试

pursuccess · 2020-09-17T09:43:10Z

哦哦，不好意思了

<view class="order-list" v-if="orderList.length">
			<view class="order-item" v-for="(order, index) in orderList" :key="index">
<!-- #ifdef H5 -->
				<view class="btns" v-if="order.status=='wait_pay'">
					<view class="payTs" v-if="payTips(order.pay_orderId)=='applet'">小程序待支付订单请通过小程序完成支付</view>
					<view v-else></view>
					<button class="buy" @click="pay(order.pay_orderId)" v-if="payTips(order.pay_orderId)=='wx'"> 付款</button>
				</view>
				<!-- #endif -->
				<!-- #ifdef MP -->
				<view class="btns" v-if="order.status=='wait_pay'">
					<view class="payTs" v-if="payTips(order.pay_orderId)=='wx'">微信公众号待支付订单请通过微信公众号完成支付</view>
					<view v-else></view>
					<button class="buy" @click="pay(order.pay_orderId)" v-if="payTips(order.pay_orderId)=='applet'"> 付款</button>
				</view>
				<!-- #endif -->
				
			</view>

报错的位置显示在这一行：

order.$orig.status == "wait_pay"

var l0 = _vm.orderList.length
    ? _vm.__map(_vm.orderList, function(order, index) {
        var $orig = _vm.__get_orig(order)

        var m0 = _vm.renderState(order.status)
        var m1 =
          order.$orig.status == "wait_pay"
            ? _vm.payTips(order.pay_orderId)
            : null

zhetengbiji · 2020-09-17T09:51:20Z

哦哦，不好意思了

<view class="order-list" v-if="orderList.length">
			<view class="order-item" v-for="(order, index) in orderList" :key="index">
<!-- #ifdef H5 -->
				<view class="btns" v-if="order.status=='wait_pay'">
					<view class="payTs" v-if="payTips(order.pay_orderId)=='applet'">小程序待支付订单请通过小程序完成支付</view>
					<view v-else></view>
					<button class="buy" @click="pay(order.pay_orderId)" v-if="payTips(order.pay_orderId)=='wx'"> 付款</button>
				</view>
				<!-- #endif -->
				<!-- #ifdef MP -->
				<view class="btns" v-if="order.status=='wait_pay'">
					<view class="payTs" v-if="payTips(order.pay_orderId)=='wx'">微信公众号待支付订单请通过微信公众号完成支付</view>
					<view v-else></view>
					<button class="buy" @click="pay(order.pay_orderId)" v-if="payTips(order.pay_orderId)=='applet'"> 付款</button>
				</view>
				<!-- #endif -->
				
			</view>

报错的位置显示在这一行：

order.$orig.status == "wait_pay"

var l0 = _vm.orderList.length
    ? _vm.__map(_vm.orderList, function(order, index) {
        var $orig = _vm.__get_orig(order)

        var m0 = _vm.renderState(order.status)
        var m1 =
          order.$orig.status == "wait_pay"
            ? _vm.payTips(order.pay_orderId)
            : null

报出的错误提供一下
以及里面用到到数据也提供一下：orderList、payTips、pay

liumingchu · 2020-09-17T09:55:19Z

@pursuccess 你直接新建一个工程打包成zip上传一下吧，要不你俩这样一直对话，收到好多邮件提醒

pursuccess · 2020-09-17T09:57:52Z

报错：TypeError: Cannot read property 'status' of undefined（是刚加载页面的时候就报这个错了。orderList初始值为空数组，通过接口获取的数组列表。结构如下： orderList: [ {"pay_orderId":"micropay2225041020","wx_orderId":"","status":"closed"}, {"pay_orderId":"micropay2225041012","wx_orderId":"","status":"wait_pay"} ] payTips(pay_orderId){ if (pay_orderId.indexOf('wx') !== -1) { return 'wx' } else if (pay_orderId.indexOf('applet') !== -1){ return 'applet' } else { return '' } } pay方法无关紧要，就是一个执行函数。 pay(pay_orderId) { }

liumingchu · 2020-09-17T10:29:19Z

@pursuccess 测试未复现问题，你试试这个测试页面在你那报错吗

<template>
  <view class="view">
    <view class="order-list" v-if="orderList.length">
      <view class="order-item" v-for="(order, index) in orderList" :key="index">
        <!-- #ifdef H5 -->
        <view class="btns" v-if="order.status=='wait_pay'">
          <view class="payTs" v-if="payTips(order.pay_orderId)=='applet'">小程序待支付订单请通过小程序完成支付</view>
          <view v-else></view>
          <button
            class="buy"
            @click="pay(order.pay_orderId)"
            v-if="payTips(order.pay_orderId)=='wx'"
          >付款</button>
        </view>
        <!-- #endif -->
        <!-- #ifdef MP -->
        <view class="btns" v-if="order.status=='wait_pay'">
          <view class="payTs" v-if="payTips(order.pay_orderId)=='wx'">微信公众号待支付订单请通过微信公众号完成支付</view>
          <view v-else></view>
          <button
            class="buy"
            @click="pay(order.pay_orderId)"
            v-if="payTips(order.pay_orderId)=='applet'"
          >付款</button>
        </view>
        <!-- #endif -->
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data () {
    return {
      orderList: []
    }
  },
  onReady () {
    this.orderList = [
      { "pay_orderId": "micropay2225041020", "wx_orderId": "", "status": "closed" },
      { "pay_orderId": "micropay2225041012", "wx_orderId": "", "status": "wait_pay" },
      { "pay_orderId": "wx2225041012", "wx_orderId": "", "status": "wait_pay" },
      { "pay_orderId": "applet2225041012", "wx_orderId": "", "status": "wait_pay" },
    ]
  },
  methods: {
    payTips (pay_orderId) {
      if (pay_orderId.indexOf('wx') !== -1) {
        return 'wx'
      } else if (pay_orderId.indexOf('applet') !== -1) {
        return 'applet'
      } else {
        return ''
      }
    },
    pay () {

    }
  }
}
</script>

<style>
</style>

pursuccess · 2020-09-17T10:43:15Z

@pursuccess 测试未复现问题，你试试这个测试页面在你那报错吗

<template>
  <view class="view">
    <view class="order-list" v-if="orderList.length">
      <view class="order-item" v-for="(order, index) in orderList" :key="index">
        <!-- #ifdef H5 -->
        <view class="btns" v-if="order.status=='wait_pay'">
          <view class="payTs" v-if="payTips(order.pay_orderId)=='applet'">小程序待支付订单请通过小程序完成支付</view>
          <view v-else></view>
          <button
            class="buy"
            @click="pay(order.pay_orderId)"
            v-if="payTips(order.pay_orderId)=='wx'"
          >付款</button>
        </view>
        <!-- #endif -->
        <!-- #ifdef MP -->
        <view class="btns" v-if="order.status=='wait_pay'">
          <view class="payTs" v-if="payTips(order.pay_orderId)=='wx'">微信公众号待支付订单请通过微信公众号完成支付</view>
          <view v-else></view>
          <button
            class="buy"
            @click="pay(order.pay_orderId)"
            v-if="payTips(order.pay_orderId)=='applet'"
          >付款</button>
        </view>
        <!-- #endif -->
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data () {
    return {
      orderList: []
    }
  },
  onReady () {
    this.orderList = [
      { "pay_orderId": "micropay2225041020", "wx_orderId": "", "status": "closed" },
      { "pay_orderId": "micropay2225041012", "wx_orderId": "", "status": "wait_pay" },
      { "pay_orderId": "wx2225041012", "wx_orderId": "", "status": "wait_pay" },
      { "pay_orderId": "applet2225041012", "wx_orderId": "", "status": "wait_pay" },
    ]
  },
  methods: {
    payTips (pay_orderId) {
      if (pay_orderId.indexOf('wx') !== -1) {
        return 'wx'
      } else if (pay_orderId.indexOf('applet') !== -1) {
        return 'applet'
      } else {
        return ''
      }
    },
    pay () {

    }
  }
}
</script>

<style>
</style>

谢谢你了！！！这个放在我这里也报错，我感觉是编辑器的问题，更新后才出现的这个问题。也可能是电脑问题吧，哎

liumingchu · 2020-09-17T11:22:55Z

你不是 CLI 创建的工程吧，如果不是的话，你重新下载编辑器试试 @pursuccess

pursuccess · 2020-09-18T01:41:42Z

你不是 CLI 创建的工程吧，如果不是的话，你重新下载编辑器试试 @pursuccess

嗯嗯，不是cli创建，我重新下载试一下吧，谢谢

hbcui1984 added the enhancement New feature or request label Jul 18, 2019

hbcui1984 assigned fxy060608 Jul 18, 2019

zhetengbiji mentioned this issue Aug 1, 2020

【bug】v-if="false" view内部methods和过滤器都会执行 #1874

Closed

zhetengbiji closed this as completed in 7c234e5 Aug 6, 2020

v-if="false" view内部过滤器会执行 #334

v-if="false" view内部过滤器会执行 #334

Comments

fangxingguang commented Apr 23, 2019

fxy060608 commented Apr 23, 2019

alamhubb commented Oct 28, 2019

yinqiangw commented Oct 31, 2019 • edited Loading

liuyingqq123 commented Nov 1, 2019

ghost commented Nov 2, 2019

liuyingqq123 commented Nov 4, 2019

ghost commented Nov 4, 2019

liuyingqq123 commented Nov 12, 2019

liumingchu commented Nov 12, 2019

ms2146 commented Dec 16, 2019

ms2146 commented Dec 16, 2019

jaceechan commented Mar 24, 2020

sonicsunsky commented Mar 29, 2020

Cople commented Mar 30, 2020

leafiy commented Apr 24, 2020

jockiller commented Jun 8, 2020

caixuhui commented Jun 19, 2020

Robin-zero commented Jul 27, 2020

zhetengbiji commented Aug 1, 2020 • edited Loading

wqscode commented Aug 14, 2020 • edited Loading

zhetengbiji commented Aug 14, 2020

userTea commented Aug 21, 2020

pursuccess commented Sep 17, 2020

zhetengbiji commented Sep 17, 2020

pursuccess commented Sep 17, 2020

2.8.11.20200907

zhetengbiji commented Sep 17, 2020

2.8.11.20200907

pursuccess commented Sep 17, 2020

2.8.11.20200907

zhetengbiji commented Sep 17, 2020

2.8.11.20200907

pursuccess commented Sep 17, 2020 • edited by zhetengbiji Loading

zhetengbiji commented Sep 17, 2020

liumingchu commented Sep 17, 2020

pursuccess commented Sep 17, 2020

liumingchu commented Sep 17, 2020

pursuccess commented Sep 17, 2020

liumingchu commented Sep 17, 2020

pursuccess commented Sep 18, 2020

yinqiangw commented Oct 31, 2019 •

edited

Loading

zhetengbiji commented Aug 1, 2020 •

edited

Loading

wqscode commented Aug 14, 2020 •

edited

Loading

pursuccess commented Sep 17, 2020 •

edited by zhetengbiji

Loading