数组绑定class的问题

版本:v1.5.4

自定义了一个icon的组件,部分代码如下

<template>
<text :class="[name, icon]"
:style="{'color': color, 'font-size': fontSize}">
</text>
</template> <script>
export default {
props: {
name: {
type: String,
default: 'iconfont'
},
icon: {
type: String
},
color: {
type: String,
default: '#666666'
},
size: {
type: [Number, String],
default: 30
}
},
computed: {
cls(){
return `${this.name} ${this.icon}`
},
fontSize(){
return this.size + 'upx'
}
}
}
</script>

使用

<lb-icon icon="icon-message"></lb-icon>

H5端显示正常无异常,模拟器模拟显示class之间多了逗号,如图所示

解决方法

利用computed进行class拼接

<text :class="cls"
:style="{'color': color, 'font-size': fontSize}">
</text>
computed: {
cls(){
return `${this.name} ${this.icon}`
}
}

Vuex mapGetters问题

版本:v1.5.4

正常使用mapGetters的时候,H5端无异常,非H5端会报错

TypeError: Cannot read property 'getters' of undefined

解决方法

main.js中增加Vue.prototype.$store = store

uniapp开发踩坑记录的更多相关文章

  1. uni-app开发踩坑记录

    大部分问题是我在h5端看不到而在android.iOS平台上暴露出来的,不包含小程序 1.:class="['defaultStyle', dynamicStyle]" 不支持直接 ...

  2. [转]微信小程序开发踩坑记录

    本文转自:http://www.cnblogs.com/NKnife/p/6283605.html 1.由于小程序wx.request()方法是异步的,在app.js执行ajax后,各分页加载app. ...

  3. 微信小程序开发踩坑记录

    1.由于小程序wx.request()方法是异步的,在app.js执行ajax后,各分页加载app.js的全局数据时,无法按顺序加载.例: //app.js App({ ajax:function() ...

  4. wepy开发踩坑记录

    与vue的不同 methods对象只存放tap等事件触发时的方法 events对象只存放$emit及$broadcast方法触发的事件 自定义方法及属性放在与methods平级的位置 props是动态 ...

  5. Spring开发踩坑记录

    #1 @EnableEurekaServer无法正常import原因是spring-cloud-dependencies版本太低,改成高版本的Edgware.SR4即可.参考:https://www. ...

  6. 你真的了解字典(Dictionary)吗? C# Memory Cache 踩坑记录 .net 泛型 结构化CSS设计思维 WinForm POST上传与后台接收 高效实用的.NET开源项目 .net 笔试面试总结(3) .net 笔试面试总结(2) 依赖注入 C# RSA 加密 C#与Java AES 加密解密

    你真的了解字典(Dictionary)吗?   从一道亲身经历的面试题说起 半年前,我参加我现在所在公司的面试,面试官给了一道题,说有一个Y形的链表,知道起始节点,找出交叉节点.为了便于描述,我把上面 ...

  7. ABP框架踩坑记录

    ABP框架踩坑记录 ASP.NET Boilerplate是一个专用于现代Web应用程序的通用应用程序框架. 它使用了你已经熟悉的工具,并根据它们实现最佳实践. 文章目录 使用MySQL 配置User ...

  8. SpringBoot+SpringSecurity+Thymeleaf认证失败返回错误信息踩坑记录

    Spring boot +Spring Security + Thymeleaf认证失败返回错误信息踩坑记录 步入8102年,现在企业开发追求快速,Springboot以多种优秀特性引领潮流,在众多使 ...

  9. IDFA踩坑记录

    IDFA踩坑记录: 1.iOS10.0 以下,即使打开“限制广告跟踪”,依然可以读取idfa: 2.打开“限制广告跟踪”,然后再关闭“限制广告跟踪”,idfa会改变: 3.越狱机器安装开发证书打的包, ...

随机推荐

  1. Android设备网络、屏幕尺寸、SD卡、本地IP、存储空间等信息获取工具类

    Android设备网络.屏幕尺寸.SD卡.本地IP.存储空间.服务.进程.应用包名等信息获取的整合工具类. package com.qiyu.ddb.util; import android.anno ...

  2. 构建微服务:快速搭建Spring Boot项目

    Spring Boot简介: Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员 ...

  3. leetCode题解 Reverse Words in a String III

    1.题目描述 Given a string, you need to reverse the order of characters in each word within a sentence wh ...

  4. .NET版UEditor报请求后台配置项http错误,上传功能无法使用的错误解决

    在配置UEditor的时候,总是报请求后台配置项http错误,上传功能将不能正常使用!,上传图片等功能都无法使用.折磨了一下午,逐步调试发现了错误原因:

  5. mac 手动卸载软件位置

    系统偏爱设置 /Users/xxxxx/Library/Preferences/ xxxx 支持文件 /Users/xxxxx/Library/Application Support/xxx文件夹 数 ...

  6. [IIS] 配置PHP的过程与坑

    * 32位与64位程序的兼容性问题 如果64位的IIS内的处理程序需要使用32位程序或者扩展,必须在ApplicationPool里面的高级设置里,将AppPool设置为允许32位.否则32位的程序将 ...

  7. 简易使用UILabel的富文本

    简易使用UILabel的富文本 使用效果: 源码: NSString+YX.h    NSString+YX.m // // NSString+YX.h // YXKit // // Copyrigh ...

  8. [翻译] UIImageView-Letters

    UIImageView-Letters https://github.com/bachonk/UIImageView-Letters An easy, helpful UIImageView cate ...

  9. linux如何查看端口被何进程占用

    1.lsof -i:端口号 2.netstat -tunlp|grep 端口号 都可以查看指定端口被哪个进程占用的情况 工具/原料   linux,windows xshell 方法/步骤     [ ...

  10. python_微信 跳一跳

    今天用python刷了一下微信跳一跳游戏得分数. 不是仅仅是玩一玩,而是为了把开发环境搭建好.(这个借口好) 参考: http://blog.csdn.net/LittleBeautiful/arti ...