gpt4 book ai didi

vue.js - 将 javascript 变量从 javascript 传递到 vuejs 组件

转载 作者:搜寻专家 更新时间:2023-10-30 22:51:58 24 4
gpt4 key购买 nike

我有一个需要一些数据的 vue 组件。我很容易在 php 中创建 json 数据并将其传递给组件。但是我想在javascript中定义一个对象并将其发送到vue组件。下面是我的 .blade.php 文件,它正确传递了 php 变量。在脚本部分我定义了一个 javascript 对象 js_table_definition。该对象不想转到组件。

<?php
$table_definition = (object) [
"name" => "vendors",
"access" => "read",
"search_post_route" => "",
"index_post_route" => "",
"index_get_route" => "",
"header_definition" => [],
"footer_definition" => [],
"column_definition" => [],
];
?>
@section('content')
<div class="panel-body">
<zzi-results-table
v-bind:results="{{ json_encode($vendors) }}"
v-bind:table_definition="{{ json_encode($table_definition) }}"
>
</zzi-results-table>
</div>
@stop

@section('script')
//can't get this variable to zzi-results-table
js_table_definition = {
"name" : "vendors",
"access" : "read",
"search_post_route" : "",
"index_post_route" : "",
"index_get_route" : "",
"header_definition" : [],
"footer_definition" : [],
"column_definition" : [],
};

@stop

我试过各种方法都没有运气。我以为会是这样的

v-bind:table_definition="{{ js_table_definition }}"
v-bind:table_definition="@{{ js_table_definition }}"
v-bind:table_definition="js_table_definition"
js_table_definition="js_table_definition"

我不想将它添加到 vue 组件的“数据”方法中,因为那样会硬编码全局变量并使其不可重用。我想我需要通过它。

这是我的组件js

    export default {
//data: function(){
// return
// {
// vendors:vendors
// }
// },
props: ['results', 'table_definition'],
mounted() {
console.log('Hi from zzi-results-table');
console.log(this.results);
console.log(this.table_definition);
var results_table = new dynamic_table(this.table_definition, this.results);

},

}

最佳答案

如所述here , 要将 Laravel 变量传递给您的 View ,您可以使用 JavaScript 包:PHP-Vars-To-Js-Transformer .

你可以有这个代码,添加这个包之后:

$table_definition = (object) [
"name" => "vendors",
"access" => "read",
"search_post_route" => "",
"index_post_route" => "",
"index_get_route" => "",
"header_definition" => [],
"footer_definition" => [],
"column_definition" => [],
];

JavaScript::put([
'table_definition' => $table_definition
])

现在 table_definition 应该在您的 vue 实例中可用。


要将 PHP 变量传递给 vue 实例,您可以使用描述的方法 here .您应该在实际的 Blade View 中启动 Vue 实例。只需在脚本标签内,您就可以:

<script>
new Vue({
data: {
table_definition: {!! $table_definition !!}
}
})
</script>

关于vue.js - 将 javascript 变量从 javascript 传递到 vuejs 组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41710045/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com