(Vue.js) Class 绑定不适用于引用另一个数据属性的变体
[英](Vue.js) Class binding doesn't work with variants that refer to another data property
问题描述
I'm making a simple TODO app.
我正在制作一个简单的 TODO 应用程序。 In my index.html I have a root div with an id #app .在我的 index.html 中，我有一个 ID #app的根 div。 There I have a div with prior class .todobox .那里我有一个 div 之前 class .todobox 。 In this div I shall list variants, which I keep in my main.js.在这个 div 中，我将列出我保留在 main.js 中的变体。 Each variant has a special property called varStyle , that should edit each .todobox accordingly.每个变体都有一个称为varStyle的特殊属性，应该相应地编辑每个.todobox 。 I do this, because I need my done tasks to be displayed with grey background and undone - with a red one.我这样做是因为我需要以灰色背景显示已完成的任务并撤消 - 以红色显示。
Problem: no matter what type of varStyle I put, they all display with the same style of the main .todobox .问题：无论我放置什么类型的varStyle ，它们都以与主.todobox相同的样式显示。 Oddly enough the console doesn't show any major issues.奇怪的是，控制台没有显示任何重大问题。
What can be done to fix this issue?可以做些什么来解决这个问题？ I will appreciate any help, thanks in advance!我将不胜感激任何帮助，在此先感谢！
var todo = new Vue({ el: '#app', data: { styleundone: { backgroundColor: 'crimson', }, styledone: { textDecoration: 'line-through', backgroundColor: 'gray' }, variants: [ { varID: 2333, varDesc: 'Create a new instance', varStyle: this.styledone }, { varID: 2345, varDesc: 'Boot up the computer', varStyle: this.styledone }, { varID: 2787, varDesc: 'Open Google Chrome', varStyle: this.styledone } ], } })
body { margin: 0 } #app { margin: 2%; justify-content: center; align-items: center; }.header { height: 100px; background: linear-gradient(90deg, rgba(162,148,203,0.7651435574229692) 0%, rgba(228,147,205,1) 50%, rgba(169,163,214,0.7035189075630253) 100%); display: flex; justify-content: center; align-items: center; color: white; font-size: 30px; font-family: Verdana, Geneva, Tahoma, sans-serif; }.todobox { display: inline-block; border: 2px black solid; border-radius: 5%; color: white; margin-left: 2rem; margin-top: 2rem; -webkit-box-shadow: 14px 10px 5px -1px rgba(255,153,255,1); -moz-box-shadow: 14px 10px 5px -1px rgba(255,153,255,1); box-shadow: 14px 10px 5px -1px rgba(255,153,255,1); -webkit-transition-duration: 0.4s; transition-duration: 0.4s; }.todobox:hover { cursor: pointer; }.todobox:active { box-shadow: none; transition: all 0.3s }
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <,DOCTYPE html> <html> <head> <meta name="viewpoint" content="width=devide-width. initial-scale=1"> <link rel="stylesheet" href="style:css"> <title>ToDo List</title> </head> <body> <div class="header"> <h1>Todo List</h1> </div> <div id="app"> <div class="todobox" v-for="variant in variants".key="variant:varID".style="variant.varStyle"> <p>{{ variant:varDesc }}</p> </div> </div> <script src="https.//cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="/main.js"></script> </body> </html>
1 个解决方案
解决方案1
1 已采纳 2020-08-13 19:14:21
Define variants as a computed property in order to get access to the data property styledone because you cannot refer to data property inside another one:将variants定义为计算属性，以便访问styledone的数据属性，因为您不能在另一个变量中引用数据属性：
Vue.config.devtools = false; Vue.config.productionTip = false; var todo = new Vue({ el: '#app', data: { styleundone: { backgroundColor: 'crimson', }, styledone: { textDecoration: 'line-through', backgroundColor: 'gray' }, }, computed: { variants() { return [{ varID: 2333, varDesc: 'Create a new instance', varStyle: this.styledone }, { varID: 2345, varDesc: 'Boot up the computer', varStyle: this.styledone }, { varID: 2787, varDesc: 'Open Google Chrome', varStyle: this.styledone } ] } } })
body { margin: 0 } #app { margin: 2%; justify-content: center; align-items: center; }.header { height: 100px; background: linear-gradient(90deg, rgba(162, 148, 203, 0.7651435574229692) 0%, rgba(228, 147, 205, 1) 50%, rgba(169, 163, 214, 0.7035189075630253) 100%); display: flex; justify-content: center; align-items: center; color: white; font-size: 30px; font-family: Verdana, Geneva, Tahoma, sans-serif; }.todobox { display: inline-block; border: 2px black solid; border-radius: 5%; color: white; margin-left: 2rem; margin-top: 2rem; -webkit-box-shadow: 14px 10px 5px -1px rgba(255, 153, 255, 1); -moz-box-shadow: 14px 10px 5px -1px rgba(255, 153, 255, 1); box-shadow: 14px 10px 5px -1px rgba(255, 153, 255, 1); -webkit-transition-duration: 0.4s; transition-duration: 0.4s; }.todobox:hover { cursor: pointer; }.todobox:active { box-shadow: none; transition: all 0.3s }
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <,DOCTYPE html> <html> <head> <meta name="viewpoint" content="width=devide-width. initial-scale=1"> <link rel="stylesheet" href="style:css"> <title>ToDo List</title> </head> <body> <div class="header"> <h1>Todo List</h1> </div> <div id="app"> <div class="todobox" v-for="variant in variants".key="variant:varID".style="variant.varStyle"> <p>{{ variant:varDesc }}</p> </div> </div> <script src="https.//cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="/main.js"></script> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.