Error TS2322: Type 'Function' is not assignable to type 'string'

Question

I'm trying to do a question answer catalogue that lets me pick questions with their respective answer options from a String Array, however when I try to assign this.currentQuestion with the question from the question catalogue I get the error mentioned in the title, same for the answers, here I get the error

TS2740: Type 'Function' is missing the following properties from type 'string[]': pop, push, concat, join, and 27 more.

Here's the code:

data() {
    return {
      question0: "Was ist 1+1",
      answers0: ["2","3","1","4"],
      questionCatalogue: [this.question0],
      answerCatalogue: [this.answers0],
      currentQuestion: "",
      currentAnswers: ["","","",""]
    };
  },
  methods: {
    initNewQuestion: function() {
      this.currentQuestion = this.questionCatalogue[0];
      this.currentAnswers = this.answerCatalogue[0];
    }
  },

My thought process was if I call for this.questionCatalogue[0] I should get this.question0 which is a String, thus I should be able to assign it to this.currentQuestion. Why is this not the case?

Answer 1

obj.questionCatalogue returning the array and this.currentQuestion is string type. please refer to the attached image. attached image

Answer 2

In my option, you should put all your questions directly inside the question catalogue as objects.

For example you can work with a structure as the following :

{
   question: "Was ist 1+1",
   answers : ["2","3","4","5"],
   goodAnswerIndex: 0
}

You can then put all your question inside a questions array.

And you can transform your initNewQuestion into this :

methods: {
    initNewQuestion: function() {
      const questionItem = this.questionCatalogue[0]
      this.currentQuestion = questionItem.question;
      this.currentAnswers = questionItem.answers;
    }
},

---

Small example using vue2 without TS

new Vue({
  el: '#app',
  data: () => ({
     currentQuestion: "",
     currentAnswers: [],
     questionsCatalog: [
        {question: "what is 1+1", answers: ["1","2","3","4"]}
     ],
  }),
  
  mounted(){
     const question = this.questionsCatalog[0]
     this.currentQuestion = question.question
     this.currentAnswers = question.answers
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h1>{{currentQuestion}}</h1>
  <ul>
    <li v-for="(answer, index) of currentAnswers" :key="index">{{answer}}</li>
  </ul>
</div>