0

Here is my code and I want to get list array and show them in html

<!DOCTYPE HTML>
<html>
    <head>
        <script src="https://unpkg.com/vue"></script>
    </head>
    <body>

        <div id="app">
            <h2>{{number}}</h2>
            <h2>Here it is!</h2>
            <div v-for="item in list">{{ item.question_text }}</div>
        </div>

    </body>

<script type="text/javascript">

var app = new Vue({
        el: '#app',
        data: {
            number:0,
            list : [{question_text: "apple", question_owner: "HJ", answer_owner: "1Sun"}, 
            {question_text: "banana", question_owner: "HJ", answer_owner: "1Sun"},
            {question_text: "caramel", question_owner: "HJ", answer_owner: "1Sun"},
            {question_text: "demon", question_owner: "HJ", answer_owner: "1Sun"}]

        }
    })

</script>
</html>

enter image description here

I think Vue was recognized rightly but some error happened while getting data, because four div DOM element was made well. Then, Why couldn't I get data properly??

1Sun
  • 2,305
  • 5
  • 14
  • 21
  • Comments are not for extended discussion; this conversation has been [moved to chat](https://chat.stackoverflow.com/rooms/186997/discussion-on-question-by-1sun-how-to-get-data-correctly-in-vue-js). – Samuel Liew Jan 20 '19 at 12:31

2 Answers2

0

Try to put your script tag into body or header tags, see here

It won't validate outside of the <body> or <head> tags. It also won't make much difference — unless you're doing DOM manipulations that could break IE before the body element is fully loaded — to putting it just before the closing </body>.

Dumitru Chirutac
  • 617
  • 2
  • 8
  • 28
0

You need to return your data:

data() {
  return {
    {
      number:0,
      list : [{question_text: "apple", question_owner: "HJ", answer_owner: "1Sun"}, 
        {question_text: "banana", question_owner: "HJ", answer_owner: "1Sun"},
        {question_text: "caramel", question_owner: "HJ", answer_owner: "1Sun"},
        {question_text: "demon", question_owner: "HJ", answer_owner: "1Sun"}]

    }
  }
}
Adam Orłowski
  • 4,268
  • 24
  • 33