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

Question

我正在做一个vue历史测验应用，我的问题是从一个API中重新获取的。我想在ResultScreen视图中显示问题、正确答案和用户的答案。我的方法是将问题推送到一个数组中，然后$emit。我可以看到它被存储在我的vue工具中，但由于某些原因，它没有显示在我想显示的组件中，因此也没有显示在结果屏幕上。

currentQuestion是一个保存问题和答案的对象。

(发出数组的代码。)

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

在它被存储的地方显示vue工具。

我想投射它的组件和不会显示问题的函数。

 <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 一个字符串值，它返回 undefined 不管 questions 是。

在不知道数据形状的情况下，被存储在 questions 是，很难知道你到底想要什么代码，但我怀疑你想要的是类似... ..:

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

...或者是...

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

...或类似的东西。

然而，与你关于如何显示某些东西的问题相辅相成，你的数据结构让我感到困惑。我希望有一个叫做 questions 是一个数组，而不是对象（特别是当你使用数组访问方法（如 .length 和 questions[index] 上。我猜想你还需要做一些额外的修改，但这超出了你关于在 v-if 声明：