如何在 vue 组件中使用 Laravel 资产 [英] How can use laravel assets in vue component

问题描述

我正在使用 laravel 和 vue js
我尝试在 vue 组件中显示图像元素，但我无法使用 Laravel 刀片助手！

<img src="{{asset('admin/images/users/avatar-1.jpg')}}";宽度=35像素"高度=23像素">

它显示我错误

那么如何在 vue 组件中使用 Assets Helper?

解决方案

vue组件文件的后缀是.vue，不能直接在这些文件中使用blade的东西，需要做如下操作:

>

Vue 组件具有所谓的 props 属性，例如，如果您创建以下组件:

//TestComponent.vue<模板><div><p :users="users"></p>

</模板><脚本>导出默认{道具:['用户']，数据:() =>({//...}),}

在这种情况下，您可以将数据传递给道具属性用户，因此您可以调用刀片文件中的组件并将您的用户从服务器端添加到道具字段，如下所示:

<test-component :users="{{ $users }}"></test-component>

对于图像，您需要熟练掌握并添加图像源.

不要忘记在 app.js 文件中初始化组件

Vue.component('test-component', require('./components/TestComponent.vue'));

i am using laravel with vue js
i try to show a image element in vue components but i cant use Laravel blades helpers !

<img src="{{asset('admin/images/users/avatar-1.jpg')}}" width="35 px" height="23px">

its show me Error

So How Can I Use Assets Helper in vue components?

解决方案

The vue component file has the file ending of .vue, you can't use the blade stuff directly in those files, you need to do following:

Vue component have so called props properties so for example if you create following component:

// TestComponent.vue

<template>
    <div>
        <p :users="users"></p>
    </div>
</template>

<script>
    export default {

        props: ['users'],

        data: () => ({
            // ...
        }),
    }
</script>

You can pass data to the props attributes in this case users, so you can call the component in your blade file and add your users from your server side to the props field like this:

<test-component :users="{{ $users }}"></test-component>

For images you need to adept this and add your image source.

Don't forget to init the component in your app.js file

Vue.component('test-component', require('./components/TestComponent.vue'));

这篇关于如何在 vue 组件中使用 Laravel 资产的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！