vue.js - 在 Vue.js 中使用附加的 prop 绑定 scss 变量
问题描述
我似乎无法找到我正在寻找的东西。我遇到了一个问题,我希望将道具绑定到自定义scss
变量。
我有以下“卡” component
:
<template>
<div class="option" v-bind:style="--optionBackground:url(img);" v-on:click="switchCards">
<div class="shadow"></div>
<div class="label">
<div class="icon">
<i class="fas fa-walking"></i>
</div>
<div class="info">
<div class="main">Blonkisoaz</div>
<div class="sub">Omuke trughte a otufta</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Card",
props: {
img: String
},
methods: {
switchCards () {
console.log('clicked')
}
}
};
</script>
忽略一些占位符脚本。
所以,我正在尝试将v-bind:style="--optionBackground:url(img);"
img 作为来自父级的道具传入,component
如下所示:
<template>
<div id="app">
<div v-for="card) in cards" class="options" v-bind:key="card.id">
<Card v-bind:img="card.img"/>
</div>
</div>
</template>
<script>
import Card from "./components/Card.vue";
export default {
name: "app",
components: {
Card
},
data () {
return {
cards: [
{ id: 1, img: 'https://66.media.tumblr.com/8b69cdde47aa952e4176b4200052abf4/tumblr_o51p7mFFF21qho82wo1_1280.jpg'},
{ id: 2, img: 'https://66.media.tumblr.com/f19901f50b79604839ca761cd6d74748/tumblr_o65rohhkQL1qho82wo1_1280.jpg'},
{ id: 3, img: 'https://66.media.tumblr.com/8b69cdde47aa952e4176b4200052abf4/tumblr_o51p7mFFF21qho82wo1_1280.jpg'},
{ id: 4, img: 'https://66.media.tumblr.com/5516a22e0cdacaa85311ec3f8fd1e9ef/tumblr_o45jwvdsL11qho82wo1_1280.jpg'}
]
}
}
};
</script>
但是,我收到以下错误:
invalid expression: Unexpected token : in
--optionBackground:url(img);
Raw expression: v-bind:style="--optionBackground:url(img);"
我已经尝试查看尽可能多的用例,但我真的不确定该去哪里......任何帮助将不胜感激!:)
解决方案
几件事。
您不能将 SASS(又名 SCSS)变量绑定到组件,因为 SASS 变量是在编译时而非运行时解析的。但是,您可以绑定一个 CSS 变量(也称为自定义属性),这就是您根据变量名称实际想要的。
使用 CSS 变量的语法与您所展示的略有不同。我怀疑你想要的是
<div class="option" v-bind:style="{'--optionBackground': backgroundImage}">
然后定义backgroundImage
为计算属性。
computed: {
backgroundImage() { return "url(" + this.img + ")"; }
}
(您可以使用模板文字使代码更简洁,但看起来堆栈溢出并不能很好地处理答案。)
编辑添加: @boussadjira 还在评论中正确指出了代码中的错字。
推荐阅读
- ios - iOS 在使用 ffmpeg 添加的音频和字幕轨道之间切换
- sql-server - 当我们在 SQL Server 中的一月份时,如何获得上季度和上个月的销售额?
- python - AttributeError:“_tkinter.tkapp”对象没有属性“TclError”
- forms - html表单:多选,只提交一个值
- javascript - 使用赛普拉斯在按钮单击时模拟 GET api
- php - 一般错误 1215:无法为 Laravel 5 添加外键约束
- jenkins - 带有 sh 的 Jenkins 脚本化管道不适用于多行脚本
- airflow - 如何使用气流组织您的项目和 dag
- python - 如何使用多个 if 条件执行 while 语句?
- java - 如何在每 5 秒内发布数据和读取数据库一次