Vue,绑定样式会覆盖循环中以前绑定的样式

时间:2018-08-28 15:49:08

标签: vue.js

我正在创建一个匹配游戏,该游戏将1个答案与许多类别相匹配。我有所有逻辑,但是我的任务是从每个正确答案到正确类别画一条线。

问题

我可以成功地从一个答案到一个类别画一条线。但是,当我选择另一个类别时,这两行的样式都会更新,并且具有完全相同的样式。我正在寻找具有样式的旧元素,以保留其原有内容,然后将新样式添加到下一个元素。如果我不在这里,请告诉我,但我希望以前有人遇到过这种情况。

我的文件中包含大量逻辑,因此我尝试精简相关信息。感谢您提供的任何帮助/见解。或者至少将我指向正确的方向。谢谢

enter image description here

标记

    <li
          ref="mgCategoryItem"
          v-for="(category, cIndex) in categories"
          :key="cIndex"
          @click="toggleCategory(categories, cIndex, $event)"
          :class="{'is-correct': finishedCategories(categories, cIndex)}"
          class="mg-item category-item"/>


<div
    ref="mgLineMaster"
    class="line-master">
    <div
      ref="mgLines"
      class="mg-lines"
      v-for="(line, lIndex) in categories"
      :key="lIndex"
      :style="matchingLines(categories, lIndex)" />
      <!-- </div> -->
  </div>

JavaScript

export default {
    data: function () {
        return {
            selectedAnswerID: undefined,
            categories: [
                {
                    "categoryID: 1,
                    "categoryName": "Strawberry"
                },
                {
                    "categoryID: 2,
                    "categoryName": "Rasberry"
                },
                {
                    "categoryID: 3,
                    "categoryName": "BlueBerry"
                }
                ]
            }
        }
    }


    methods: {
        matchingLines: function (arr, i) {
         if (i === this.selectedCategoryID) {

             // I set the returned variables here using get getBoundingClientRect() I omitted most but kept a few to get the point across

             // Apply the category positional attrs
             let catRects = this.selectedCategoryItem.getBoundingClientRect()
             let catWidth = catRects.width

             return {
                left: catWidth + 'px',
              }

            }
        },
        toggleCategory: function (arr, i, event) {
          if (event.target.checked) {
            this.selectedCategoryID = arr[i].categoryID
            let mgCategory = this.$refs.mgCategoryLabel
            this.selectedCategoryItem = mgCategory[i]
           }

        }
    }

0 个答案:

没有答案