记几个小问题

发表于 |

swiper v-for 中 click 不生效

1
2
3
4
5
6
<swiper-slide
	v-for="(item, index) in bannerAds"
	v-bind:key="index"
	@click.native="linkAds(item)"
	:style="'background-image:url('+ item.url +')'">
</swiper-slide>

如果你的 swiper 也是使用了 v-for 并且 click 作用在 v-for 所在的元素，那么有可能会导致 click 事件不会执行。这时候试试在用 @click.native 可解决问题。

类似的问题还有 router-link 上加 click 也不生效。方法相同。

一般是自己定义的组件，或者 vue 自定义的标签，如上面的 router-link会有这个问题。

可以理解为，.native 修饰符就是用来注册元素的原生事件而不是组件自定义事件的。是把组件变回原生DOM的一种方式，相当于给组件绑定原生事件。对原生html标签无用。因为本身Vue是有自己的一套进行传递的机制，这样告诉了Vue,用原生的事件，而不是Vue自己的那一套事件触发机制。

对象的 filter

一般我们会很习惯去用 arr.filter 去帮我们做一些过滤的事情，那么如果是想要给 object map 做一些过滤的事情，我们可以像下面这样封装：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/***
 * 对象过滤器
 * @param obj
 * @param filterFunction
 */
export function objectFilter(obj, filterFunction) {
  return Object.assign(
    ...Object.keys(obj)
      .filter(key => filterFunction(obj[key]))
      .map(key => ({ [key]: obj[key] }))
  )
}

/**
 * 对象过滤器
 * arr.reduce(callback[, initialValue])
 * callback(accumulator, currentValue, currentIndex, array)
 * @param obj
 * @param filterFunction
 * @returns {{}}
 */
export function filterObject(obj, filterFunction) {
  return Object.keys(obj)
    .filter(key => filterFunction(obj[key]))
    .reduce((res, currKey) => (res[currKey] = obj[key]), {})
}

Raven配置某些时候不发送错误数据

shouldSendCallback设置只有 production 环境才发送错误数据，本地的错误内容不发送到 sentry 上。

dataCallback在发送数据之前想要做的事情，可以放这里面。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Raven.config("xxxx", {
  environment: process.env.NODE_ENV,
  release: process.env.VERSION,
  sampleRate: 0.1,
  dataCallback: data => {
    if (process.env.NODE_ENV != "production") {
      console.log(data)
    }
    return data
  },
  shouldSendCallback: () => {
    return process.env.NODE_ENV == "production"
  }
})
  .addPlugin(RavenVue, Vue)
  .install()