add hyperlink in vue.js - html

currently I am scraping some website and return the value of the scraped data (from json file) into an HTML table in one of the component file in vue.js When displaying one of the value, I want this value to be put as href="link". However, since I am iterating all the data, "the link" is in the form of {{ row[8] }} which cannot be read by the vue code. I tried:
<a v-bind:href="{{ row[8] }}"> View </a>
<a href={{ row[8] }}> View </a>
View
but none of these work. Here is my code:
<tbody>
<tr v-for="row in sesami">
<td>{{ row[0] }}</td>
<td>{{ row[1] }}</td>
<td>{{ row[2] }}</td>
<td>{{ row[3] }}</td>
<td>{{ row[4] }}</td>
<td>{{ row[5] }}</td>
<td>{{ row[6] }}</td>
<td>{{ row[7] }}</td>
<td>
View
</td>
</tr>
</tbody>
currently, with the code that I used, the hyperlink is mapped to the word "View" which is correct, but the value or the link is not inserted inside which caused the link when clicked to refresh the page instead. Please help....
Thank you


You do not need string interpolation when using the v-bind syntax as the scope of the expected argument is a javascript variable, e.g. row. Observe:
<a v-bind:href="row[8]"> View </a>
Which is syntactically the same as:
<a :href="row[8]"> View </a>


You could iterate through the row items and you reach the index 8 bind the item to the href attribute :
<tbody>
<tr v-for="row in sesami">
<td v-for="(item ,i) in row">
<template v-if="i===8">
<a v-bind:href="item" target="_blank"> View </a>
</template>
<template v-else>
{{item}}
</template>
</td>
</tr>
</tbody>

Related

Why I cannot see data in hierarchy table?

I'm trying to create a hierarchical table in Vue.js, this should be such a base therefore. However, I don't want to show the table with the data. The error would be here:
<tr v-if="item.childrenVisible" v-for="child in item.children" :key="child.id">
If I remove this whole section, I can see the table
HTML:
<table>
<thead>
<tr>
<th>Name</th>
<th>Parent</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr v-for="item in items" :key="item.id">
<td>{{ item.name }}</td>
<td>{{ item.parent }}</td>
<td>
<button #click="toggleChildren(item)">Toggle Children</button>
</td>
<tr v-if="item.childrenVisible" v-for="child in item.children" :key="child.id">
<td>{{ child.name }}</td>
<td>{{ child.parent }}</td>
<td>
<button #click="toggleChildren(child)">Toggle Children</button>
</td>
</tr>
</tr>
</tbody>
</table>
</div>
Vue.js script and my whole mini-project:
https://jsfiddle.net/barabas/jrcufeah/

The problem was you cannot use v-if and v-for on the same node like I did so this is how I fix it
<template v-if="item.childrenVisible">
<tr v-for="child in item.children" :key="child.id">
<td>{{ child.name }}</td>
<td>{{ child.parent }}</td>
<td>
<button #click="toggleChildren(child)">Toggle Children</button>
</td>
</tr>
</template>
I split up the v-for and v-if to two different node template and tr

HTML table row submit and post to Flask server

What I have is this in my HTML code:
<table id="example" class="table table-striped">
<thead>
<tr>
<th scope="col">Index</th>
<th scope="col">Col2</th>
<th scope="col">Col3</th>
<th scope="col">Col4</th>
</tr>
</thead>
<tbody>
{% for item in rows %}
<tr>
<td><button formtarget="_blank"
name="input" type="submit"
formaction="/get"
value={{item[0]}}>{{item[0]}}</button></td>
<td>{{ item[1] }}</td>
<td>{{ item[2] }}</td>
<td>{{ item[3] }}</td>
</tr>
{% endfor %}
Notice that I am adding button as type 'submit' to send item[0] which is essentially the row id of a sqlite3 table back to Flask server view function '/get'. My Flask '/get' function is as follows:
#app.route('/get', methods =['GET', 'POST'])
def getfmhtml():
input = str()
if request.method == 'POST':
input = int(request.form['graph'])
return render_template('index.html', input = input)
When I click the button in a row in Index column however, no value item[0] is posted to the server (i.e. nothing happens, no error either). I want to know what's the problem in my code. I want to Post the row id from index column back to my Flask server.

posting below as per suggestion from Gnudiff that worked. Enclosing button in form tag post the value back to the server:
{% for item in rows %}
<tr>
<td><form action="/get" method="POST"><button formtarget="_blank"
name="input" type="submit"
formaction="/get"
value={{item[0]}}>{{item[0]}}</button>
</form>
</td>
<td>{{ item[1] }}</td>
<td>{{ item[2] }}</td>
<td>{{ item[3] }}</td>
</tr>
{% endfor %}

How to create dynamic table in html and angular

I need to present in Html a dynamic table that I don't know what is the template of each row:
Some times it contains 2 columns, sometimes 4...
I need something like this:
<div>
<h1>Angular HTML Table Example</h1>
<table>
<thead>
<tr>
<th>#ID</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
<th>Address</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of ItemsArray">
<th>{{ item.id }}</th>
<td>{{ item.name }}</td>
<td>{{ item.email }}</td>
<td>{{ item.phone}}</td>
<td>{{ item.address }}</td>
</tr>
</tbody>
</table>
</div
And instead of:
<tr *ngFor="let item of ItemsArray">
<th>{{ item.id }}</th>
<td>{{ item.name }}</td>
<td>{{ item.email }}</td>
<td>{{ item.phone}}</td>
<td>{{ item.address }}</td></tr>
somethong like:
<tr *ngFor="let item of ItemsArray">
<ngFor="let property of item.structure>
<td>{{ property }}</td>
Do you have any advice for me?
Thanks

You can get keys of list item by using below code and render header column
Object.keys(list);
This is stackblitz code
You can see required code in Product component file. I hope it works for you scenario

This is the solution:
<tbody class="f">
<ng-container *ngFor="let message of this.allMessages | filter:term | paginate: config ;let i = index">
<tr >
<td>{{ i+1 }}</td>
<ng-container *ngFor = "let j of this.messageIndex">
<td>{{message.data[0][j]}}</td>
</ng-container>
</tr>
</ng-container>
</tbody>

How to break column as title in a HTML table

I want do report with HTML and put one column as title and supress repetition. I'm using Laravel 5.8.
This is my view code.
<div class="container">
<div class="table-responsive">
<div class="table table-striped table-bordered">
<table>
<thead>
<tr>
<th>Leito</th>
<th>Nº Atendimento</th>
<th>Dt. Atendimento</th>
<th>Paciente</th>
<th>Idade</th>
<th>CID Principal</th>
<th>CID</th>
<th>Médico</th>
<th>Dias internado</th>
<th>Observação</th>
</tr>
</thead>
<tbody>
#foreach($analytic as $patient)
<tr><td colspan="11"><strong>Setor: </strong>{{ $patient->setor }}</td></tr>
<tr class="{{ $patient->corlinha }}">
<td>{{ $patient->leito }}</td>
<td>{{ $patient->atendimento }}</td>
<td>{{ $patient->dtatendimento }}</td>
<td>{{ $patient->paciente }}</td>
<td>{{ $patient->idade }}</td>
<td>{{ $patient->cidp }}</td>
<td>{{ $patient->cid }}</td>
<td>{{ $patient->medico }}</td>
<td>{{ $patient->dias }}</td>
<td>{{ $patient->observacao }}</td>
</tr>
#endforeach
</tbody>
</table>
</div>
</div>
</div>
And this is my result:
Result
When "Setor" is same i need agroup them.
I need something like this:
Result that i need
Thank´s

In your case you need to groupBy your collection. I am giving an example.
Controller Code:
public function index()
{
$$analytic = Model::all()->groupBy('setor');
return view('view', compact('analytic '));
}
In blade your table will look like something:
<table>
#foreach ($analytic as $key => $data)
<tr>
<th colspan="10">{{ $key }}</th>
</tr>
#foreach ($data as $patient)
<tr>
<td>{{ $patient->leito }}</td>
<td>{{ $patient->atendimento }}</td>
<td>{{ $patient->dtatendimento }}</td>
<td>{{ $patient->paciente }}</td>
...........
...........
</tr>
#endforeach
#endforeach
</table>
Hope you can now work around to get your desired result. Read Laravel documentation about collection groupBy here.

Laravel - Render html passed by an associative array

I've been struggling with this for a few days.
I have an associative array, which I want to loop in my view. It works great when looping to create a table, for example.
The thing is, in another view, I am going to need to include some HTML (a button) in the array, that I am going to pass to the view as a JSON. I've tried it like this and it, no success.
$datacol[] = array(
'button' => '<a href="tasks/details/{{ $task->id }}" class="btn btn-sm">
<i class="bookmark big icon" data-toggle="tooltip" data-placement="top" title="Task Details"></i></a>',
'id' => $task->id,
'task_type' => (DB::table('tasktypes')->where('id','=', $task->task_type_id)->value('task_type')),
'related_block' => (DB::table('chapters')->where('id','=', $task->related_block)->value('description')),
'assigned_to' => (DB::table('users')->where('id','=', $task->assigned_to)->value('display_name')),
'time' => (DB::table('task_interactions')->where('task_id','=', $task->id)->pluck('task_time')->sum()),
'start_date' => (DB::table('task_interactions')->where('task_id','=', $task->id)->where('status','=','In Progress')->pluck('created_at')->first()),
'end_date' => (DB::table('task_interactions')->where('task_id','=', $task->id)->where('status','=','Finished')->pluck('created_at')->first()),
'status' => (DB::table('tasks')->where('id','=', $task->id)->value('status')),
'comments' => (DB::table('tasks')->where('id','=', $task->id)->value('comments'))
);
Does anyone knows a way of passing HTML inside the array and make sure that the array is rendered in the view.
<tbody>
#foreach($datacol as $d)
<tr>
<td>{{ $d['button'] }}</td>
<td>{{ $d['id'] }}</td>
<td>{{ $d['task_type'] }} - {{ $d['related_block'] }}</td>
<td>{{ $d['assigned_to'] }}</td>
<td>{{ $d['time'] }}</td>
<td>{{ $d['start_date'] }}</td>
<td>{{ $d['end_date'] }}</td>
<td>{{ $d['status'] }}</td>
<td>{{ $d['comments'] }}</td>
</tr>
#endforeach
</tbody>
Thanks in advance

Change your array like this you need to give proper html string for button since it will not further parsed by blade. In href you are using blade ({{}}) to append $task->id, That's why it will not append proper id to the url. you need to use (.) to concatenate id to url.
$datacol[] = array(
'button' => '<a href="tasks/details/'.$task->id.'" class="btn btn-sm">
<i class="bookmark big icon" data-toggle="tooltip" data-placement="top" title="Task Details"></i></a>',
'id' => $task->id,
// other stuff
);
And then in view render button using {!! $html !!}
<tbody>
#foreach($datacol as $d)
<tr>
<td>{!!$d['button'] !!}</td>
<td>{{ $d['id'] }}</td>
<td>{{ $d['task_type'] }} - {{ $d['related_block'] }}</td>
<td>{{ $d['assigned_to'] }}</td>
<td>{{ $d['time'] }}</td>
<td>{{ $d['start_date'] }}</td>
<td>{{ $d['end_date'] }}</td>
<td>{{ $d['status'] }}</td>
<td>{{ $d['comments'] }}</td>
</tr>
#endforeach
</tbody>
I hope it will help :)

Remove the button key-value pair completely from the PHP code and render the markup in the view.
You can generate the <a> tag in the view, only using the id you passed ({{ $id }}):
<a href="tasks/details/{{ $id }}" class="btn btn-sm">
<i class="bookmark big icon" data-toggle="tooltip" data-placement="top" title="Task Details"></i></a>
No need to mix HTML in your PHP code (considering you're using Laravel, which completely isolates the view from other code).