从 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中将变量从视图传递到控制器而没有表单