Laravel 和 Vue 模板错误

Question

我在 laravel 5.3 中第一次使用 vue，我目前能够在 vue 中使用 Jquery AJAX 请求获取我的数据，但是我在显示它时遇到了一些问题。这是目前我的脚本：这是我的观点：

<li>

    <!-- inner menu: contains the actual data -->

    <ul class="menu" id="messagesArea">
        <messages></messages>
    </ul>
</li>
<!-- Further Down the page -->
<template id="messages-template">
  <div v-for="messages in list">
    <p>
    @{{ messages.name }}
    </p>
  </div>
</template>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript" src="/public/js/messages.js">

</script>

这是messages.js

Vue.component('messages', {
  template: '#messages-template',
  data: function (){
  return {
    list:[]
  };},
  created (){

    $.getJSON('ap/test', function(messages){
      this.list = messages;
    }.bind(this))
  }
});

new Vue({
  el: '#messagesArea'
});

这是通过 ajax 收到的：

list: Array[5]
0: Object
created_at: "2016-12-05 16:26:03"
id: 5
infoContent: "{\"rows\":2,\"content\":{\"Description\":{\"curSize\":12,\"name\":\"Description\",\"Type\":\"string\",\"isLarge\":false,\"value\":\"There was a problem with this!\",\"row\":1}}}"
name: "Issue 5"
progression: "1"
project: "7"
updated_at: "2016-12-05 16:26:03"
user: "1"
1: Object
created_at: "2016-12-05 16:25:45"
id: 4
infoContent: "{\"rows\":2,\"content\":{\"Description\":{\"curSize\":12,\"name\":\"Description\",\"Type\":\"string\",\"isLarge\":false,\"value\":\"There was a problem with this!\",\"row\":1}}}"
name: "Issue 4"
progression: "1"
project: "7"
updated_at: "2016-12-05 16:25:45"
user: "1"
2: Object
3: Object
4: Object

我无法遍历这些内容并从中获取数据。我能得到一些帮助吗？谢谢。

请询问您是否需要整个视图或其他任何内容。 我已经按照第一个答案中的建议更改了但是我收到了这些错误：

错误 1：

    [Vue warn]: Cannot use v-for on stateful component root element because it renders multiple elements:
<div v-for="messages in list">
    <p>
    {{ messages.name }}
    </p>
  </div>

错误 2：

    vue.js:513 [Vue warn]: Multiple root nodes returned from render function. Render function should return a single root node. 
(found in component <messages>)

这些是我在更改模板之前遇到的错误：

<template id="messages-template" v-for="messages in list">
  <p>
  @{{ messages.name }}
  </p>
</template>

错误 1

    [Vue warn]: Property or method "messages" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. 
(found in component <messages>)

错误 2

[Vue warn]: Error when rendering component <messages>: 

错误 3

Uncaught TypeError: Cannot read property 'name' of undefined
at Proxy.eval (eval at makeFunction (vue.js:8132), <anonymous>:2:45)
at VueComponent.Vue._render (vue.js:2927)
at VueComponent.<anonymous> (vue.js:2335)
at Watcher.get (vue.js:1643)
at new Watcher (vue.js:1635)
at VueComponent.Vue._mount (vue.js:2334)
at VueComponent.Vue$3.$mount (vue.js:5916)
at VueComponent.Vue$3.$mount (vue.js:8199)
at init (vue.js:2648)
at createComponent (vue.js:4030)

Answer 1

我认为这是因为您已将 v-for 放入模板本身，您必须放入模板内部、另一个 div 或其他元素中，如下所示：

<template id="messages-template">
  <div>
    <div v-for="messages in list">
      <p> @{{ messages && messages.name }}</p>
    </div>
  </div>
</template>

错误原因：

vue.js:513 [Vue 警告]：从渲染函数返回多个根节点。渲染函数应返回单个根节点。 （在组件中找到）

您收到此错误是因为在您的组件模板中您不能在根元素上使用v-for 指令。例如以下是不允许的，因为您的组件可以有多个根元素：

<template id="messages-template">
    <div v-for="messages in list">
      <p> @{{ messages && messages.name }}</p>
    </div>
</template>