从 Laravel 视图中将属性传入 Treeselect vue 组件

Posted

技术标签:

【中文标题】从 Laravel 视图中将属性传入 Treeselect vue 组件【英文标题】:Pass in an attribute into Treeselect vue component from Laravel view 【发布时间】:2020-01-05 16:58:49 【问题描述】:

我正在尝试将 Vue-Treeselect 链接:https://vue-treeselect.js.org/#node 包装在它自己的 vue 组件中,这样我就可以简单地拥有例如<tree-select></tree-select> 在我需要的 Laravel 视图文件中。

我想不通的是,我如何从 Laravel 视图中传入某些特定于实例的道具并使用组件模板中的属性值? 我想从 Laravel 视图中传入一个字段名称,如下所示:<tree-select name='property_ids'></tree-select> 稍后的 vue 组件模板可以使用传入的名称作为组件模板内的 name 属性。

我正在使用 https://vue-treeselect.js.org/ 中的入门代码 所以在我的 Laravel 视图表单中,我想要这个标签<tree-select name='property_ids'></tree-select> 但是如何在 vue 组件模板中设置name 属性值(示例代码如下)?

<template>
    <div>
        <treeselect v-model="value" :multiple="true" :options="options" name="passedInName"></treeselect>
    </div>
</template>

<script>
    // import the component
    import Treeselect from '@riophae/vue-treeselect'
    // import the styles
    import '@riophae/vue-treeselect/dist/vue-treeselect.css'

    export default 
        // register the component
        components:  Treeselect ,
        data() 
            return 
                // define the default value
                value: [],
                // define options
                options: [  
                    id: 'b',
                    label: 'b',
                , 
                    id: 'z',
                    label: 'z',
                , 
                    id: 'x',
                    label: 'x',
                 , 
                    id: 'v',
                    label: 'v',
                ],
            
        ,
    
</script>

【问题讨论】:

【参考方案1】:

你必须在你的 vue 组件中声明传递的 props 才能在模板中使用它们

<template>
    <div>
        <!-- Pass the prop to the name attribute -->
        <treeselect v-model="value" :multiple="true" :options="options" :name="this.name">
        </treeselect>
    </div>
</template>

<script>
export default 
    props: ['name'], // <-- The declared prop
;
</script>

【讨论】:

有效!!之前我也在注册道具,但是在模板中我使用的是name="name"而不是:name="this.name",再次感谢!

以上是关于从 Laravel 视图中将属性传入 Treeselect vue 组件的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Laravel 中将数据从 1 个视图插入到 2 个表中

如何在 Laravel 中将变量从视图传递到控制器而不使用 URL 或表单

如何在laravel php中将变量从视图传递到控制器而没有表单

在 laravel 5.4 中将变量从 Route 传递到 Controller 的最简单方法是啥?

Laravel从表单输入中将“null”插入数据库。

Laravel - 从刀片视图中的模型关系中检索属性