Vue emit 在其他组件中并不重要

Question

我正在制作一个 vue 历史测验应用程序，我的问题是从 API 中检索出来的。我想在 ResultScreen 视图中显示问题、正确答案和用户的答案。我采取的方法是将问题推入一个数组并 $emit 它。我可以看到它存储在我的 vue 工具中，但由于某种原因，它没有显示在我想要显示的组件中，因此没有显示在 resultScreeen 中。

currentQuestion 是一个包含问题和答案的对象。

[发出数组的代码。]

storeQuestion: function (value) {
      value = this.submitData.questionArray1
      this.$emit('storeData', value)
      console.log(value, 'my pants are on fire')
    }

shows vue tools at it has been stored.

[我要投影的组件和不会显示问题的功能。]

 <template>
  <div>
    <QuizQuestion
      v-if="questions.length"
      :currentQuestion="questions[index]"
      @storeData="storeQuestion"
                  />
    <p v-if="questions">{{ questions }}</p>
    <p v-else=""> loading.....</p>
  </div>
</template>
<script>
// import { mapGetters } from 'vuex'
import QuizQuestion from '@/components/QuizQuestion.vue'
// se på gameplay hvor vi returner numcorrect, numtotal og numpoints, vi må se på hvordan vi kan importere verde
export default {
  name: 'GameOver',
  components: {
    QuizQuestion
  },
  data () {
    return {
      questions: ''
    }
  },
  methods: {
    storeQuestion: function (value) {
      this.questions = value
      alert(value)
    }
  }
}
</script>

this.submitData.questionArray1.push(this.currentQuestion.question)

Answer 1

问题出在你的模板上，特别是这一行：

<p v-if="questions">{{ storeQuestion() }}</p>

因为storeQuestion方法没有return一个字符串值，所以不管questions的值是什么，它都会返回undefined。

如果不知道存储在 questions 中的数据的形状，很难确切知道您想要什么代码，但我怀疑您想要类似的代码：

<p v-if="questions">{{ questions.text }}</p>

...或者也许...

<p v-if="questions">{{ questions[index].text }}</p>

...或类似的。

但是，除了您关于如何显示某些内容的问题之外，您的数据结构让我感到困惑。我希望一个名为questions 的数据变量是一个数组，而不是对象（尤其是因为您使用的是数组访问方法（例如.length 和questions[index]）。我怀疑你会有一些额外的变化制作，但这超出了您关于在 v-if 语句中显示信息的问题的范围。