数组绑定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. strConnection连接Access数据库

    string strConnection = "Provider=Microsoft.ACE.OLEDB.12.0;";            strConnection += @ ...

  2. js获取当前页面url信息方法(JS获取当前网址信息)

    设置或获取对象指定的文件名或路径. alert(window.location.pathname) 设置或获取整个 URL 为字符串. alert(window.location.href); 设置或 ...

  3. Android TextEdit属性

    EditText继承关系:View-->TextView-->EditText 去掉边框 将EditText属性设置修改 android:background="@null&qu ...

  4. mysql 存储引擎 配置文件my.ini 的配置方式

    如果想使修改后的参数生效,须重新启动MySQL服务器. #存储引擎设置 default-storage-engine = INNODB

  5. sql in interview for a job

    1.mysql下建表及插入数据 /* Navicat MySQL Data Transfer Source Server : mysql Source Server Version : 50640 S ...

  6. Surface电池阈值

    Surface电池阈值 笔记本电脑一般都会提供一个电池保养的软件,其主要最用是让电池在插电情况下保持在50%-80%之间,以延长电池寿命,减少电池损耗.而微软自家的Surface却一直没有这个设置. ...

  7. 数组转换list集合问题

    1问题的起因: 项目总要使用一个方法把数组转换成list集合,百度说有这个方法Arrays.asList可以实现 2结果报错 抛出java.lang.UnsupportedOperationExcep ...

  8. jsoncpp cmake

    (1)下载jsoncpp源码源码地址:https://github.com/open-source-parsers/jsoncpp/tree/0.y.z(2)解压源码 unzip jsoncpp-0. ...

  9. Linux服务器安装redis数据库教程

    前面小Alan给大家说了jdk的安装,这篇跟大家聊聊redis非关系型数据库在Linux服务器的安装. redis简单介绍 REmote DIctionary Server(Redis) 是一个由Sa ...

  10. 【Java】【转】在命令行中编译和运行java

    原文:http://blog.csdn.net/u010900574/article/details/50792353 同时加载编译多个jar包和java文件 在个人平常使用或者当我们把代码部署到Li ...