Question

我有一个组件正在尝试使其接收数组。

如果我在刀片文件中这样做：

<mega-menu
  :grouped-categories="{{ $categories->filter(function($category) { return $category['enabled']; })->groupBy('group)->toJson() }}">
</mega-menu>

它按预期工作。它在Vue中显示为数组。

但是，如果我尝试运行某些收集方法，例如'filter'和'groupBy'，然后应用“ toJson”，Vue会将其作为对象接收不是我所需要的。

OnClickListener

我怀疑在将其转换为数组的过滤或分组过程中发生了某些事情。关于如何操作作为Collection实例的“ $ categories”变量并将其作为数组传递给Vue的任何想法？

Answer 1

根据 @Vivick 提供的信息，关联数组作为对象传递给Javascript。因此，我将在Vue组件中处理对象。

Answer 2

为避免特殊字符出现问题，请在模板中添加addslashes，例如：

:users="'{{ addslashes(\App\Users::all()->toJson()) }}'"

在vue组件中，将Users作为道具：

props: {
    users: String
},

并将其添加到数据中

data() {
    return {
        users: JSON.parse(this.mailinglists)
    };
},

希望这会有所帮助。

Answer 3

使用

v-bind:color="{{json_encode($yourVariable)}}"

在元素中

例如：

<color-item v-bind:color="{{json_encode($yourVariable)}}" ></color-item>

在您的控制器中：

$myArray = array("name" => "لوازمات");
$item =  "لوازمات";
$collection = Color::all();


return view('home', compact('item', 'collection', 'myArray', ...));

在刀片中：

@extends('layouts.app', ['item' => $item,'myArray' => $myArray, 'colors'=> $collection])

将变量传递到vuejs：

<primary-header 
   :colors="{{json_encode($colors)}}" 
   :item="{{json_encode($item)}}" 
   v-bind:my-array="{{json_encode($myArray)}}">

在您的vuejs文件中

<template>
    <div>
        {{item}}
        {{colors[0].name}}
        {{myArray.name}}
  
    </div>
</template>

<script>

    export default {
        name: "primary-header",
        props: {
            item:  String,
            myArray: Object,
            colors: Array
        },
        methods: {
        }
    };
</script>

<style scoped>
</style>

如何将Laravel过滤的集合作为数组传递给Vue？

3 个答案: