Javascript Vuejs-如果满足条件，则以友好方式绑定类并执行函数

我正在尝试为我的vue应用程序中的三个小问题找到解决方案。 第一个是关于类绑定的。我有一张bootstrao卡，上面会显示一个问题和相关答案。用户单击无线电输入后，将保存答案并禁用其他选项

我正在动态地检查用户的答案是否正确，但我无法按常规更改卡边框的类别。在给出答案之前，我希望有一个黑色边框，如果正确，则将border类更改为

border success

或

border danger

，如果错误。我尝试过使用此代码，但没有成功，如果没有给出答案，border也将具有

border danger

类

应用程序UI的另一个小问题是卡片页脚。我添加了一个卡片页脚，该页脚在显示的问题得到回答之前不可见。它将显示正确的答案，但我注意到，如果给出正确的答案，它将出现图形故障，并出现然后消失

La risposta correttè：{{correctAnswers[qindex]}

为了尝试修复，我已经测试了

v-if

和实际的

v-show

，我还使用css在元素上添加了一个转换，但似乎不起作用

.card footer{
过渡：易用.3s；
}

最后也是最重要的问题是条件检查。我想在用户回答了所有可用问题后显示一个模式。我试图在vue的挂载钩子中添加一个

if（）

语句，但它永远不会被激发。我还尝试调用axios调用的

.then（）

回调中的方法，该调用将检查每个问题的答案，但没有成功

导出默认值{
名称：“应用程序”，
数据（）{
返回{
孤岛加载：是的，
结果：错，
时间：空，
问题：[]，
回答：{}，
用户回答：[]，
正确答案：[]
}
},
安装的（）{
this.init（）；
//语句将永远不会被赋值
if（this.answered.length==this.questions.length）{
this.quizResults（）；
}
},
方法：{
init（）{
axios({
方法：“GET”，
网址：'http://localhost:8990/init'
})。然后（（res）=>{
这个。问题=[]；
this.questions=res.data；
console.log（this.questions）；
this.isLoading=false；
});
},
检查答案（索引、索引、值）{
//log（qindex，index，value）；
这个。回答[qindex]=true；
this.userAnswers.push（值）；
axios({
方法：“POST”，
网址：'http://localhost:8990/answercheck',
数据：{
问题索引：索引，
选择：价值
}
})。然后（（res）=>{
console.log（res.data）；
这个.correctAnswers.push（res.data.correctAnswer）；
});
},
quizResults（）{
//回答完所有问题后的一些逻辑
console.log（“结果”）；
}
}
}

---

有人能帮我找到解决这些问题的方法吗？谢谢。

这里有三个问题

关于您的第一个问题：

您的问题是类的条件是否用

[]

换行。 这应该解决这个问题：

关于第二个问题：

可能在等待服务器响应时，

userAnswers[qindex]

具有正确答案的值，并且

correctAnswers[qindex]

仍然未定义（直到您得到响应），在这一瞬间，它们彼此不相等-这就是为什么你看到页脚一秒钟，然后它消失的原因。 因此，解决方案是检查：

correctAnswers[qundex]&&userAnswers[qindex]！=正确答案[qindex]

关于你的第三个问题

我认为最好的解决方案是将条件放入

。然后像您尝试的那样，将
checkAnswer（）的
中。您的问题是您检查了
this.answered.length
但
this.answered
是一个对象而不是数组，并且它没有
length
属性。因此，您需要检查：

Object.keys（this.answered）.length==this.questions.length

因此，您的方法应该是：

checkAnswer（索引、值）{
//log（qindex，index，value）；
这个。回答[qindex]=true；
this.userAnswers.push（值）；
axios({
方法：“POST”，
网址：'http://localhost:8990/answercheck',
数据：{
问题索引：索引，
选择：价值
}
})。然后（（res）=>{
console.log（res.data）；
这个.correctAnswers.push（res.data.correctAnswer）；
if（Object.keys（this.answered）.length==this.questions.length）{
this.quizResults（）；
}
});
},

顺便说一下，在
mounted（）
内部调用条件时，条件不起作用的原因是，只有在加载组件时才调用
mounted
，它不会侦听更改。您可以在
中了解更多信息，我将尝试您的建议来解决问题。我唯一遗漏的是
qindex
值。它是从
v-for
循环生成的索引，因此我无法在计算中访问它以分配绑定类。哦，我现在知道了，我将更新我的答案。我测试了建议，但似乎不起作用。在回答问题之前，卡片的边框将为红色，并且页脚将永远不会出现。此外，页脚的
v-if
将阻止它在需要时出现：（我编辑了关于边框类别的答案。您需要页脚始终显示，还是在您的答案不正确时显示？只有在答案不正确时才需要显示页脚