Question

我正在使用VueJS，我想将一个来自Laravel服务器的变量传递给VueJS。

这是我的代码：

<div v-for="team in championships.find((elem) => elem.championship == {{ $championship->id }}).teams"
                 v-cloak
                 :championship= {{ json_encode($championship) }} >

对我来说，拥有一个名为锦标赛的Vue对象非常重要，目前的冠军将在vue中进行，所以我可以在团队中循环：

    <div v-for="team in championship.teams" ... >

但我知道如何在props的组件中进行操作，但我不知道如何在没有道具的情况下在Vue中获得冠军对象。在data中，我无法使其发挥作用。

有什么想法吗？

Answer 1

在<head>标记内，将“锦标赛”属性添加到窗口对象中，如下所示：

<script>
 window.championship = {{ $championship }};
</script>

然后在您的Vue实例中，数据对象将“锦标赛”定义为先前定义的属性：

data: {
  championship: championship
}

Answer 2

我相信如果你将Laravel作为api服务器并将你的应用程序变成一个＆＃34; SPA＆＃34;那将会容易得多。

无论如何，Vue.js模板语法只有在你将对象包含到Vue的实例中时才能工作

或者

Vue.component('someComponent',{
  template: `<h1>Hello</h1>`
})

或

<template>
   <h1>Hello</h1>
</template>
<script>
  export default {
    name: 'hello',
    ...
  }
</script>

因此，直接将模板写入Vue样式将无法使其正常工作。但是，您仍然可以将$championship作为javascript变量传递给front，并使用vue.js来呈现数据。

<html>
  <body>
    <div id="app"></div>
  </body>
  <script>
    var championComponent = Vue.component({
      template: `
        <div v-for="team in championship.teams">
          <span>{{ team }}</span>
        </div>
      `,
      data: function () {
        return {
          championship: {{ json_encode($championship) }} // parse your champion data here
        }
      }
    });
    var app = new Vue({
      el: "#app"
    });
  </script>
</html>

祝你好运！

使用没有组件的道具

2 个答案: