如何在 Vue.js 中正确获取数据答案

【问题标题】：How to get Data correctly in Vue.js如何在 Vue.js 中正确获取数据
【发布时间】：2019-06-13 23:53:24
【问题描述】：

这是我的代码，我想获取 list 数组并在 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>

我认为Vue 被正确识别，但是在获取数据时发生了一些错误，因为四个div DOM 元素被制作得很好。那么，为什么我不能正常获取数据？？

【问题讨论】：

评论不用于扩展讨论；这个对话是moved to chat。

标签： javascript html vue.js vue-component

【解决方案1】：

尝试将你的 script 标签放入 body 或 header 标签中，see here

它不会在
或标签之外 validate。也不会有很大的不同——除非你在做 DOM 操作可能会破坏IE before body 元素已满载 - 把它就在结束之前 .

【讨论】：

是的..如您所见，我已经将
我想你没有。它在浏览器中，因为 Chrome 很智能；P 但在您的代码中，它位于 </body> 标记之后和 </html> 标记之前。

【解决方案2】：

您需要返回您的数据：

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"}]

    }
  }
}

【讨论】：

它不起作用..但非常感谢您的回答！
看看 ;) codesandbox.io/s/…