我正试图解决我的vue应用程序中的三个小问题。第一个是关于类绑定。我有一个引导卡，将显示一个问题和相关答案。用户点击无线电输入后，答案被保存，其他选项被禁用。
我正在动态检查用户的答案是否正确，但我无法动态更改卡片边框的类。我希望在给出答案之前有一个黑色边框，如果答案是正确的，则将边框类更改为border-success或border-danger，如果答案是错误的。我已经尝试了这段代码，但没有成功，如果没有给出答案，边框也会有border-danger类。

<div class="card text-dark bg-light border-secondary shadow mt-3 mb-3" :class="[userAnswers[qindex] === correctAnswers[qindex] && answered[qindex] ? 'border-success' : 'border-danger']">

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

<div class="card-footer bg-transparent border-success fw-bold" v-show="userAnswers[qindex] !== correctAnswers[qindex]">La risposta correttà è: {{ correctAnswers[qindex] }}</div>

为了尝试修复，我测试了v-if和实际的v-show，我还用css在元素上添加了一个过渡，但似乎不起作用

.card-footer {
  transition: ease-in .3s;
}

最后一个也是最重要的问题是条件检查。我想显示一个模态时，用户已经回答了所有可用的问题。我尝试在vue的挂载钩子中添加一个if()语句，但它永远不会被触发。我还尝试调用axios调用的.then()回调函数中的方法，该方法将检查每个问题的答案，但没有成功。

export default {
  name: 'App',
  data(){
    return {
      isLoading: true,
      showResult: false,
      elaspedTime: null,
      questions: [],
      answered: {},
      userAnswers: [],
      correctAnswers: []
    }
  },
  mounted(){
    this.init();
    // statement will be never evalued 
    if( this.answered.length === this.questions.length ){
      this.quizResults();
    }
  },
  methods: {
    init(){
      axios({
        method: 'GET',
        url: 'http://localhost:8990/init'
      }).then( (res) => {
        this.questions = [];
        this.questions = res.data;
        console.log(this.questions);
        this.isLoading = false;
      });
    },
    checkAnswer(qindex, index, value){
      // console.log(qindex, index, value);
      this.answered[qindex] = true;
      this.userAnswers.push(value);
      axios({
        method: 'POST',
        url: 'http://localhost:8990/answercheck',
        data: {
          questionIndex: index,
          choice: value
        }
      }).then( (res) => {
        console.log(res.data);
        this.correctAnswers.push(res.data.correctAnswer);
        
      });
    },
    quizResults(){
// some logics after all the questions are answered 
      console.log('Results');
    }
  }
}

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