Vue.js类绑定不适用于引用另一个数据属性的变体

问题描述

我正在制作一个简单的Todo应用。在我的index.html中，我有一个ID为#app的根div。那里有一个班级为.todoBox的div。在这个div中，我将列出变体，并将其保存在main.js中。每个变体都有一个称为varStyle的特殊属性，该属性应相应地编辑每个.todoBox。之所以这样做，是因为我需要将已完成的任务显示为灰色背景，并且将其还原为红色（红色）。

问题：无论我输入哪种类型的varStyle，它们都以与主要.todoBox相同的样式显示。奇怪的是，控制台没有显示任何重大问题。

如何解决此问题？感谢您的帮助，谢谢！

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',{
                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,1);
    Box-shadow: 14px 10px 5px -1px rgba(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>

解决方法

将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',{
          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,1);
  box-shadow: 14px 10px 5px -1px rgba(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>

javascript vue-component vue.js