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

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?

CodePudding user response：

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

CodePudding user response：

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>