I'm using Spatie media library and I can upload images to storage and database. And I'm trying to display a media collection in a Vue component. This is my Controller:
public function showHotelPhoto($id)
{
$hotel = Hotel::with('media');
return Inertia::render('AdminHotelPhoto', [
'data' => $hotel,
]);
}
And this my Vue component:
<template>
<breeze-authenticated-layout>
<template #header>
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
Foto Hotel
</h2>
</template>
#foreach ($hotel as $hotels)
#foreach ($hotels->getMedia('property_images') as $image)
<div class="-item">
<img src="{{ asset($image->getUrl()) }}">
</div>
#endforeach
#endforeach
</breeze-authenticated-layout>
</template>
<script>
import BreezeAuthenticatedLayout from '#/Layouts/Authenticated'
export default {
components: {
BreezeAuthenticatedLayout,
},
props: ['data'],
}
</script>
I know using #foreach can throw an error, but this is only for illustration. I want to loop get media collection in the Vue component.
You should use v-for instead of #foreach.
When you say with media, the media is returned as an array. You can access the path of the image with the original_url parameter in the directory.
Related
I'm having users' array data and rendering this from route to Dashboard.vue component through inertia render method, where I'm unable to pass users data from Dashboard.vue component to Users.vue component.
Route::get('/dashboard', function () {
$users = User::all();
return Inertia::render('Dashboard', ['users' => $users]);
})->name('dashboard');
Dashbaord.vue parent component
<Users title="Hello world" users="{{ $users }}"></Users> //this one passing {{ $users }} as string data in props.
<Users title="Hello world" :users="{{ $users }}"></Users> //this one getting syntax error.
Users.vue child component
<template>
<div>
<h1>Component Displayed</h1>
<p>{{ title }}</p>
<ul v-for="user in users" :key="user.id">
<li>{{ user.name }}</li>
</ul>
</div>
</template>
<script>
export default{
props:{
users:Array,
title:String
}
}
</script>
Can anyone suggest to me how to pass array data from one component to another component in Vue js?
Have you tried <Users title="Hello world" :users="{{ users }}"></Users> in the parent?
(users, not $users)
:users="$page['props']['users']" worked.
I'm passing through data from laravel into my vue component in order to be able to use VueJS however in my for each statement, the loop ends after the first set of data and does not show everything.
<div>
<v-card-title>{{course}}</v-card-title>
<v-card-subtitle>{{school}}</v-card-subtitle>
</div>
<script>
export default {
name:"InputForm",
props: ['course', 'courseGroup', 'school'],
}
</script>
This is the blade code that im using to pass data to vue
#foreach ($modules as $module)
<input-form
:course="'{{$module->Course}}'"
:school="'{{$module->School}}'"
/>
#endforeach
use json_encode() function to send data to vuejs
#foreach ($modules as $module)
<input-form
:course="{!! $module->Course !!}"
:school="{!! $module->School !!}"
/>
#endforeach
I am trying to get data from my laravel app, and display it in Vue CLI.
I see the Response, but I can not display it in the VUE application.
When i do get to example API it's works, but not from my laravel server.
<template>
<div id="app">
<h1>{{ results }}</h1>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return{
results: null
}
},
mounted() {
axios.get('http://127.0.0.1:8000/api/')
.then(response => {
this.results = response.data.results
})
}
}
</script>
Your results are being received as an array of objects, a JSON encoded Laravel collection. You need to single out the object you want to display, and then a property of that object.
<div id="app">
<h1>{{ results[0].name }}</h1>
</div>
However, you should really only be returning one object if this is the case from your controller method, not an array of objects. (e.g., ->first() instead of ->get())
<div id="app">
<h1>{{ result.name }}</h1>
</div>
Collections are generally for displaying multiple results in lists, table, options, etc.:
<div id="app">
<ul>
<!-- v-for will loop through results -->
<li v-for="(result, index) in results">{{ result.name }}</li>
</ul>
</div>
EDIT:
Also, your results declaration needs to be adjusted according to the Network response.
this.results = response.data.results;
Should be:
this.results = response.data;
Or alternatively, your controller response needs to be:
return response()->json(['results' => $results]);
The answer was Cross-Origin Resource Sharing.
To connect laravel API with front-end i need to do add barryvdh/laravel-cors by composer.
composer require barryvdh/laravel-cors
Next add middleware in app/Http/Kernel.php to enable using API outside laravel APP. In my problem to Vue Cli.
My case looks like this:
Laravel template:
<div class="block-id" is="Header">
<span>ID #3265872</span>
<ul class="tools">
<li>History</li>
<li>TOP</li>
</ul>
<button>Check</button>
</div>
The vuejs component looks just the same
<template>
<div class="block-id">
<span>ID #{{ids.id}}</span>
<ul class="tools">
<li><a>History</a></li>
<li><a>TOP</a></li>
</ul>
<button>Check</button>
</div>
</template>
<script>
import {mapGetters} from 'vuex';
export default {
name: "Header",
computed: {
...mapGetters('global', [
'ids'
])
}
}
</script>
The problem is that when I render the component the href attribute is gone. So is there any way to preserve the href attribute in a element?
I have a vue js application that fetches data from a database using ajax and presents them in a foundation tab. I have emulated everything as best I know how but unfortunately the content is not appearing.
My Vue component code is as below.
<template>
<section>
<pos-header></pos-header>
<div id="products">
<ul class="tabs" data-tabs id="product-types">
<li class="tabs-title" v-for="type, index in products.types" :class="{ 'is-active': index == 0}">
<a :href="'#' + type.name">
{{ type.name }}
</a>
</li>
</ul>
<div class="tabs-content" data-tabs-content="product-types">
<div v-for="type, index in products.types" class="tabs-panel" :class="{ 'is-active': index == 0}" :id="type.name">
<p>Products</p>
<p>{{ index }} {{ type }}</p>
</div>
</div>
</div>
</section>
</template>
<script>
import { mapActions } from 'vuex';
import Header from './includes/Header.vue';
export default{
data() {
return {
products: {
types: []
}
}
},
components: {
'pos-header': Header,
},
mounted(){
let url = this.$store.getters.getApiUrl + '/product/types';
axios.get(url).then( response => {
this.products.types = response.data.productTypes;
$(document).foundation();
});
}
}
</script>
The mounted method fetches the data and saves them in a data property called products types and I have ascertained that the items are being retrieved. This application is contained within a laravel application and laravel handles the backend api.
I should also add that i am able to see the links that change the tab content but the contents of the tabs are not displayed.