vue.js - VueJS 组件,不能覆盖类
问题描述
我正在尝试覆盖我的 VueJS 组件的某个实例,但是由于某种原因,该组件仍在使用默认值。
我试图超越的价值是buttonClass
. 其他道具似乎工作正常,所以不太确定为什么这个不工作。
实例:
<delete-button buttonClass="is-info" csrf="{{ csrf_token() }}" action="redirects/delete-all"
text="Delete All" body="This will delete ALL redirects"></delete-button>
零件:
<template>
<form v-bind:action="action" method="post" @submit.prevent="confirm($event)">
<input type="hidden" name="_token" v-model="csrf">
<input type="hidden" v-model="id" name="id-value">
<button type="submit" :class="['button is-link', buttonClass]">
<i class="fas fa-trash-alt"></i>
<span v-html="text"></span>
</button>
</form>
</template>
<script>
export default {
props: {
'id': {},
'csrf': {},
'action': {},
'buttonClass': {
default: 'is-danger'
},
'text': {
default: 'Delete'
},
'title': {
default: 'Are you sure?'
},
'body': {
default: ''
}
}
// etc
}
</script>
解决方案
取决于这一切是如何组合在一起的,模板中的道具有时需要是烤肉串的,即
<delete-button button-class="is-info" ...
见https://vuejs.org/v2/guide/components-props.html#Prop-Casing-camelCase-vs-kebab-case
HTML 属性名称不区分大小写,因此浏览器会将任何大写字符解释为小写。这意味着当您使用 in-DOM 模板时,camelCased 道具名称需要使用它们的 kebab 大小写(连字符分隔)等价物
仅供参考,单文件组件确实使用“in-DOM 模板”。
推荐阅读
- python-2.7 - elasticsearch-dsl-py 带有术语和范围的查询过滤器
- perforce - 在 Perforce 中,resolve -am 后分配给文件的更改列表是什么?
- c# - 在 SQL Windows 窗体中找不到错误
- django - 关于反向关系的 Django 管理列表过滤器
- apache - Telnet localhost 连接失败(Apache和httpd运行正常)
- mysql - MySQL查询将持续时间添加到上一条记录
- wpf - WPF 添加按钮单击未触发
- android - Firebase - 预定义的用户列表和电话号码身份验证
- python - 矢量微分方程
- facebook-graph-api - 返回评论总数,包括共享位置