I'm trying to fetch data from my database and display it as HTML content but it only turns out as a string, I'm using vuejs component in laravel. This is the code
<div id="main-window" v-for="post in posts">
<div class="post">
<div class="content">
{{post.content}}
</div>
</div>
How can I use the post.content as HTML?
You need to use v-html binding. Docs
<div id="main-window" v-for="post in posts">
<div class="post">
<div class="content" v-html="post.content">
</div>
</div>
Related
I am doing a small project with vue.js and laravel. I have a list of products, when I click on a specific product on "Quick view" button I want to show all data about that product in a modal but the data is not showing in the modal.
Can you help me please. Here is my code:
#extends('app')
#section('content')
<div id ="crud" class="row">
<div class="col-xs-12">
<h1 class="page-header">Lista de Articulo</h1>
</div>
<div class="wrap-icon right-section col-md-12" data-toggle="modal" data-target="#list" >
<div class="wrap-icon-section wishlist">
<a href="#" class="link-direction">
<i class="fa fa-heart" aria-hidden="true"></i>
<div class="left-info">
<span class="index">0 item</span>
<br>
<span class="title">Wishlist</span>
</div>
</a>
</div>
</div>
<div class="row">
<div v-for="keep in keeps" class="col-md-4" style="width:25%;" #mouseover="showByIndex = keep" #mouseout="showByIndex = null">
<div class="container">
<img :src="keep.foto" style="width:100%; max-width:150px;">
<button class="btn" v-show="showByIndex === keep" v-on:click.prevent="showKeep(keep)">Quick view</button>
</div>
<h3>
<b> #{{keep.nombre}}</b>
</h3>
<p> #{{keep.descripcion}}</p>
I fixed it. The error was because I called the modal file outside the div. Thanks to everybody.
you can't send data directly from vue in blade structure, you need to write a component for that.
https://v3.vuejs.org/examples/modal.html#modal-component
So I am trying to create a car sales website using Laravel. The code presented shows 20 Cars from the database being shown but all one after the other. I want it to appear in columns of 3 or 4 if possible. I've been trying to use col-4 but it doesn't make any difference. Any help appreciated. The only answer I could find online was that the container was within the row but I don't have this issue so unsure.
<div class="container text-center">
<h2>Cars</h2>
<div class="row">
#foreach ($allcars as $car)
<div class="col-4">
<div class="card">
<img class="card-img-top" src="{{asset('qashqai.jpg')}}" alt="Card
image cap">
<div class="card-body">
<h4 class="card-title">{{$car->name}}</h4>
<p class="card-text">{{$car->description}}</p>
</div>
<div class="card-body">
Card link
Another link
</div>
</div>
</div>
#endforeach
</div>
</div>
<div class="table">
<div class="table-head">
<div class="table-head-title">Ranking Equipos</div>
</div>
<div class="table-body">
<div class="table-body-row active">
<div class="col-key">Mark</div>
<div class="col-value">9233</div>
</div>
<div class="table-body-row">
<div class="col-key">Amanda</div>
<div class="col-value">7216</div>
</div>
<div class="table-body-row">
<div class="col-key">Mark</div>
<div class="col-value">6825</div>
</div>
<div class="table-body-row">
<div class="col-key">Paul</div>
<div class="col-value">6184</div>
</div>
<div class="table-body-row">
<div class="col-key">Amanda</div>
<div class="col-value">5866</div>
</div>
</div>
</div>
This is my HTML and I want to get last child of .table-body.
I tried to use JavaScript like logic and used indexing like this
$lastChild = $node->filter('.table-body .table-body-row')[4]; but it shows error. Cannot use object of type "Symfony\Component\DomCrawler\Crawler" as array
I was stuck in similar situation recently and I resolve this by using last() method. Syntax is here: $node->filter('.table-body .table-body-row')->last();
I'm using Laravel 5.0 and paginate along with the render() function in my view. Rather than go back to the top of the screen after I select the next page I want it to jump to #msgs.
Here is some of my code:
<h1 class="centered" id="msgs">Announcements</h1>
#foreach($messages->getCollection()->all() as $message)
<div class="row">
<div class="row">
<div class="col-sm-9">
<h3>{{$message->title}}</h3>
</div>
<div class="col-sm-3">
<h4>From: {{$message->author_name}}</h4>
</div>
</div>
<div class="row">
<p>{{$message->text}}</p>
</div>
</div>
<hr class="featurette-divider">
#endforeach
<div class="centered">
{!! $messages->render() !!}
</div>
I'm still getting a grasp on the flow of things in laravel so I'm not really sure what to do. I tried to use append->('#msgs') but realized that its appending an array in the parameters, not appending a path to the url. I there a simple way to achieve this without overriding anything?
You might want to use fragment() method:
{!! $messages->fragment('msgs')->render() !!}
Here is the link to the documentation: Pagination - Laravel
I have started designing a website using codeigniter tutorial from tuts plus and encountered problem on how to add carousel images using Bootstrap in codeigniter. My images are found at /images/...
How can I solve this problem?
<div class="intro-block">
<div class="container">
<div class="row">
<div class="span3">
<div class=" t">
</div>
</div>
<div class="span9">
<div id="artcoursel" class="carousel slide">
<div class="carousel-inner">
<img src= "images/test-1.png" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
Try this.
<img src=<?php echo base_url('images/test-1.png')?>>