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

我无法在theese中循环并从中获取数据。我可以得到一些帮助吗。

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

错误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 warn]：从渲染函数返回的多个根节点。渲染函数应返回单个根节点。（在组件中找到）

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

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

Laravel和Vue模板错误

1 个答案:

错误原因：