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

凌凌漆 lv.2

发布时间：2022-09-05 09:40:58 433

相关标签： # 前端

我正在尝试制作一个问答游戏，在得到随机播放的答案后，它们有时会被"\" \""标记包围。仅显示正确答案时，不会有这些标记。我试过使用通常可以解决这个问题的 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 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>

</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

}

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

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

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

特别声明：以上内容（图片及文字）均为互联网收集或者用户上传发布，本站仅提供信息存储服务！如有侵权或有涉及法律问题请联系我们。