Question

我正在使用Laravel练习Vue列表渲染，无法使用v-for指令在我的刀片视图中显示数据。

我已经尝试了Internet上的各种示例。我有一个简单的列表，其中包含一些要显示在列表中的项目，但是我没有显示内容，而是收到显示在屏幕上的项目名称，例如{{item.name}}

这是我的item.blade.php视图文件中的相关部分：

forecast

这是来自app2.js（因为我还没有创建模板，所以还不需要.vue文件）

arfima

我在浏览器中得到的全部是<ul> <li v-for="item in inventory"> @{{ item.name }} </li> </ul> </div> @section('scripts.app.footer') <script type="text/javascript" src="{{ mix('js/app2.js') }}"></script> @endsection，我希望看到这4个项目名称的列表。我不确定在哪里出错，因为我看过其他示例，而我的其他团队项目之一也可以在v-for上正常工作（使用.js文件，而不是.vue文件），但是我可以无法显示简单的列表。任何帮助，将不胜感激。 npm run dev也可以正常工作。

Answer 1

数据必须返回数据对象data:()=>{ return { a:'stuff' } }

<template>
  <div>
    <ul>
      <li v-for="item in inventory" :key="item">@{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data: () => {
    return {
      inventory: [
        { name: "MacBook Air", price: 1000 },
        { name: "MacBook Pro", price: 1800 },
        { name: "Lenovo W530", price: 1400 },
        { name: "Acer Aspire One", price: 300 }
      ]
    };
  }
};
</script>

sandbox

如何在Laravel中使用Blade视图获取Vue v-for列表渲染

1 个答案: