返回

vue.js-Vue绑定有时会在字符串周围加上“\”\“”,但v-html让它总是说Object object?

发布时间:2022-09-05 09:40:58 314
# 前端

我正在尝试制作一个问答游戏,在得到随机播放的答案后,它们有时会被"\"        \""标记包围。仅显示正确答案时,不会有这些标记。我试过使用通常可以解决这个问题的 v-html,但是所有的答案都是[Object object]. 我曾尝试尝试使用 [0] [2] 等检索数组和对象的一部分,但这也不起作用。

这是我的html:

  Style binded so that if that button is selected, the background colour of the button will change. Colour is a variable changed when answer is checked -->

      <button class="answer" :disabled="answered" @click="checkAnswer(shuffled[0])" :style="selected == shuffled[0].value && {backgroundColor: colour}">{{shuffled[0]}}</button>

      <button class="answer" :disabled="answered" @click="checkAnswer(shuffled[1])" :style="selected == shuffled[1].value && {backgroundColor: colour}">{{shuffled[1]}}</button>

      <button class="answer" :disabled="answered" @click="checkAnswer(shuffled[2])" :style="selected == shuffled[2].value && {backgroundColor: colour}">{{shuffled[2]}}</button>

      <button class="answer" :disabled="answered" @click="checkAnswer(shuffled[3])" :style="selected == shuffled[3].value && {backgroundColor: colour}">{{shuffled[3]}}</button>

      <!-- Button running function to end game with parameters of current correctCount and totalQuestions -->

      <button type="button" @click="finish(correctCount, totalQuestions)" class="btn button done">Finish</button> <div class="correct"><p v-if="answered"><strong>Correct Answer:</strong> {{correctAnswer}}</p></div><button type="button" :disabled="!nextAvailable" @click="getQ(selectedDifficulty)" @click="shuffle(options)" class="btn button next">Next</button>

      <!-- Button which is disabled when a question loads and runs functions to shuffle the answers and get a new question -->

    </div>

    <h3>Debugging</h3>

    <p><strong>Correct Answer: </strong>{{correctAnswer}}</p>

  </div>

这是我的相关JS:

    let getQ = async function() {

let response = await fetchURL('https://the-trivia-api.com/api/questions?categories=film_and_tv&limit=1&region=AU'); // api source link

     this.correctAnswer = response[0].correctAnswer;

     this.incorrectAnswerOne = response[0].incorrectAnswers[0];

     this.incorrectAnswerTwo = response[0].incorrectAnswers[1];   

     this.incorrectAnswerThree = response[0].incorrectAnswers[2];    

     this.question = response[0].question;

     this.shuffle(options); // shuffles the answers in options variable

     this.answered = false; // resets the disabled buttons

     this.nextAvailable = false; // disables 'next' button

     this.totalQuestions++; // increases number of total questions

    }

   // function to shuffle the answers

   let shuffle = function(array) {

     this.selected = null; // resets selected variable

     let num = array.length, t, raInt;

     // while there are remaining elements to shuffle

        while (num) {

          // choose random

          raInt = Math.floor(Math.random() * num--);

          // swap with current element

          t = array[num]

          array[num] = array[raInt];

          array[raInt] = t;

        }

        this.shuffled = array.value; // saves to shuffled variable

   }

所有变量都在组件中声明和返回。我想要的是它总是把每个答案都打乱了,没有这些标记。

有一些错误消息,但我不太确定它们的含义: 在此处输入图像描述

如果我没有提供足够的信息或代码,请随时说出您是否需要更多信息。

特别声明:以上内容(图片及文字)均为互联网收集或者用户上传发布,本站仅提供信息存储服务!如有侵权或有涉及法律问题请联系我们。
举报
评论区(0)
按点赞数排序
用户头像