Question

我同时发现php，laravel，vuejs，我想有些事情我还不太好；）

我制作了一个新组件“ tableau”，它是一个基本表，并希望在我的应用程序的许多地方使用它，我只需要指定其标题，列和数据即可。 FootballerController是我获取所有数据的地方。

这是现在正在工作的东西：

app.js

    protected void GetFileEXE(object sender, CommandEventArgs e)
    {
        string file = e.CommandArgument.ToString();
        string filename = Server.MapPath(file);
        FileInfo fileInfo = new FileInfo(filename);
        Response.Clear();
        Response.AddHeader("Content-Disposition", "attachment; filename=" + fileInfo.Name);
        Response.AddHeader("Content-Length", fileInfo.Length.ToString());
        Response.ContentType = "application/x-msdownload";
        Response.Flush();
        Response.WriteFile(fileInfo.FullName);
        Response.End();
    }

footballer.blade.php

const tableau = new Vue({
    components:{tableau:Tableau
   },
   data: function() {
        return  {
            title: "the best footballers",
            searchQuery: '',
            gridColumns: ['footballer', 'cote', 'nationalite'],
            gridData: [
                { footballer: 'Remond', cote: 951, nationalite:'USA' },
                { footballer: 'Marcel', cote: 935, nationalite:'ESP' },
                { footballer: 'Stian', cote: 923, nationalite:'NOR' },
                { footballer: 'Martin', cote: 923, nationalite:'USA' },
                { footballer: 'Pierre', cote: 918, nationalite:'ESP' },
            ]
        }
   }
}).$mount('#tableau');

TableauComponent

<tableau
    v-bind:titre="title"
    :rows="gridData"
    :columns="gridColumns "
    :filter-key="searchQuery" >
  </tableau>

这有效。

然后，这就是我想要的：能够将控制器中的值放入使用TableauComponent.vue的footballer.blade.php

FootballerController

<template>
    <div >
       <h1 >{{titre}}</h1>
       <table >
            <thead>
            <tr>
                <th v-for="key in columns"
                    {{ key | capitalize }}
                </th>
            </tr>
            </thead>
            <tbody>
                <tr v-for="entry in rows">
                    <td v-for="key in columns">
                    {{entry[key]}}
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>


<script>
export default {
    name:'tableau',
    props: {
        rows: Array,
        columns: Array,
        titre: String
  }
}
</script>

在 footballer.blade.php

中

public function footballer($id){
    //process to get all this data in DB ($footballer, $gridData, $gridColumns, $title)
$footballer= (Footballer::select(SOME REQUEST)->where('id', '=', $id)->get())[0];

        return view('footballers/footballer', ['footballer' => $footballer,
        'gridData' => $gridData,
        'gridColumns' =>  $gridColumns,
        'title' => $title] );
    }

然后在 app.js 中，我不再需要数据

  <tableau
    v-bind:titre="{{ $title }}"
    :rows="{{ $gridData }}"
    :columns="{{ $gridColumns }}" >
  </tableau>

但这不起作用，并告诉我“属性或方法未在实例上定义，但在渲染期间被引用”

我根本没有管理，很烦恼，我有一个很好的方法：我不应该在FootballerController中获取数据吗？如果没有，那我可以从哪里得到？

非常感谢。

Answer 1

同时在Blade和javascript框架中使用{{ value }}时。您需要使用@{{ value }}来避免Blade和Vue之间的冲突。

尝试

<tableau
  v-bind:titre="@{{ $title }}"
  :rows="@{{ $gridData }}"
  :columns="@{{ $gridColumns }}" >
</tableau>

此外，当您使用:rows="value"时，value必须是javascript语法，否则，在rows="value"时，value将被视为string。

您可能需要使用json_encode来格式化Laravel中的数据，如果使用Laravel 5.5 ^，则可能需要使用@json。

Answer 2

您在刀片中的属性之前使用'：'符号，这表示文档中所说的'v-bind'：VueJS Shorthands。因此，首先，要将字符串分配给道具，不需要在“ titre”之前添加“：”。

然后，要解决您的问题，您可以尝试为道具添加默认值，例如：

props: {
    rows: {
        default: []
    },
    columns: {
        default: []
    },
    titre: {
        default: ''
    }
}

我没有尝试，但是我认为它应该可以工作。

Answer 3

非常感谢，确实是php数组到javascript数组的问题。

在php控制器中，我将数据解析为json

'gridData' =>json_encode($gridData),

在php视图中footballer.blade.php

<tableau
   titre="{{ $title }}"
   rows="{{ $gridData }}">
</tableau>

在Vue视图中，我得到一个数组，并为此更改了代码：

 rows: {
          type: String,
          default: ""
      }

 var rowsArray = JSON.parse(this.rows)

现在看来，我在请求后获得的数据没有得到正确的解析，但这是另一点：）

Laravel和VueJS->如何将Controller数据传递到我的Vue视图中？

3 个答案: