我正在创建一个匹配游戏,该游戏将1个答案与许多类别相匹配。我有所有逻辑,但是我的任务是从每个正确答案到正确类别画一条线。
问题
我可以成功地从一个答案到一个类别画一条线。但是,当我选择另一个类别时,这两行的样式都会更新,并且具有完全相同的样式。我正在寻找具有样式的旧元素,以保留其原有内容,然后将新样式添加到下一个元素。如果我不在这里,请告诉我,但我希望以前有人遇到过这种情况。
我的文件中包含大量逻辑,因此我尝试精简相关信息。感谢您提供的任何帮助/见解。或者至少将我指向正确的方向。谢谢
标记
<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]
}
}
}