I'm trying to create a table using vue.js as frontend and bootstrap-vue for css styles.
The generated table html should be like:
<table>
<tr><td>item_1_1<br/>item_1_2<br/>item_1_3</td><td>item_1_4<br/>item_1_5</td></tr>
<tr><td>item_2_1<br/>item_2_2</td><td>item_2_3</td></tr>
</table>
So as you can see, inside every td tag, there can be multiple items. Every item takes a single line. And the number of items is not fixed.
In bootstrap-vue, there is a b-table component:
<b-table :items="items"></b-table>
It binds data to items:
data() {
return {
items: [
{ r1c1: 40, r1c2: 'Dickerson', r1c3: 'Macdonald' },
{ r2c1: 21, r2c2: 'Larsen', r2c3: 'Shaw' }
]
}
}
Every single element from items takes one single cell in the b-table.
My question is how to add new lines for a single item here, like if I want r1c1 to be like: 40<br/>20. I tried adding '\n' but it ended up in the webpage a space. Please help, many thanks.
Related
I have a table in my Vuejs project similar to the one that I shared its screenshot above.
My question is; How can I delete a <tr> element from the table when the Delete button of it is pressed for each row?
On the other hand, I want the Add button at the top right of the table to be functional as well. When I click the Add button, I want another <tr> element to be created at the bottom of the table. However, there should be input fields on this element where the user can enter information for each column. After the user has written the information in each column, that row should be added to the table. How can I do that?
if I am correct you are using v-for loop to render all <tr>s
then use the v-for with index like v-for="(obj, index) in objects" to obtain index
to add use Array.prototype.push() to add empty row e.g. objects.push({x: null, y: null})
to remove use Array.prototype.splice() e.g objects.splice(index, 1)
just assign those functionalities to respective buttons.
You could attempt this using a data property in your component and then implement two methods: deleteRow and addRow.
This could be an example code
data() {
return {
dataTable: [
{
id: 1,
code: code1,
description: description1,
},
{
id: 2,
code: code2,
description: description3,
},
...
]
}
}
methods: {
deleteRow(id) {
this.dataTable = this.dataTable.splice(
this.dataTable.findIndex(item => item.id === id)
)
}
addRow(newRow) {
// newRow = {id: 3, code: code3, description: description3}
this.dataTable = [...this.dataTable, newRow]
}
},
Your component will be updated by Vue.js reactivity system.
Probably addRow method should be called from a modal component where you put the input fields to set newRow.
I have an AMP-LIST which includes a few items, each item has some properties. One of these properties is an array of Images that is supposed to be used inside an AMP-CAROUSEL. Something like this scheme:
<amp-list src="A/JSON/URL">
<h2>{{somthing}}</h2>
<p>{{somthing}}</p>
<amp-carousel>
** AN ARRAY IS NEEDED TO BE RENDERED INSIDE HERE**
</amp-carousel>
</amp-list>
How can I render the IMAGES array which is part of ITEMS array inside the carousel for every item
{
items: [
{
prop:value1,
images:['image1URL','image2URL','image3URL',....],
},
{
prop:value2,
images:['image4URL','image5URL',....],
},
]
}
*** Problem Solved :
It's an AMP-HTML project by the way.
And I managed to get the results by changing the html code to this:
<amp-list src="A/JSON/URL">
<h2>{{somthing}}</h2>
<p>{{somthing}}</p>
<amp-carousel>
{{#TheImageArray}}
<img src={{theURL}} />
{{/TheImageArray}}
</amp-carousel>
</amp-list>
I'm trying to get object items from inside a parent object using a v-for inside another v-for in Vue.js.
Data structure:
flights: [
{
"airline": "BA",
"airport": "EBJ",
"status": {
"_code": "A",
"_time": "2018-03-02T14:19:00Z"
}
},
etc....
]
<div v-for="flight in flights">
<p>{{flight.airline}}</p>
<p>{{flight.airport}}</p>
<div v-for="st in flight.status">
<p>{{st._code}}</p> // should return 'A'
<p>{{st._time}}</p> // should return '2018-03-02T14:19:00Z'
</div>
</div>
However, neither st._code or st._time return anything. st returns both values ("A" and "2018-03-02T14:19:00Z").
Any idea on how to return the single values inside the status object?
It is possible to use v-for on an object, as you're trying to do with status, but the syntax is slightly different; in cases where iterating over an object is useful you'll generally want to include the key as well as the value:
<div v-for="(val, key) in flight.status">
<p>{{key}}: {{val}}</p>
</div>
would output
<p>_code: A</p>
<p>_time: 2018-03-02T14:19:00Z</p>
In your case you already know the specific keys you want, so it would be easier to not use v-for and instead just use e.g {{flight.status._code}}.
Unless there can be more than one "status" per flight, there's no good reason to wrap status in an array. This will work with your existing data structure:
<div v-for="flight in flights">
<p>{{flight.airline}}</p>
<p>{{flight.airport}}</p>
<p>{{flight.status._code}}</p>
<p>{{flight.status._time}}</p>
</div>
The reason you are not seeing the expected output is because, of this line:
<div v-for="st in flight.status">
That means you are expecting vue to iterated throught this:
"status": {
"_code": "A",
"_time": "2018-03-02T14:19:00Z"
}
and the above is an object, not an array ... so unless status is an array, it won't work.
If you expect your code to work, try changing your array to this:
flights: [
{
"airline": "BA",
"airport": "EBJ",
status: [{
"_code": "A",
"_time" : "2018-03-02T14:19:00Z"
}]
}
]
working demo:
https://jsfiddle.net/943bx5px/82/
I am using Vue Js v.2.4.4 and trying to configurate vue-tables-2 plugin.
I have a list of rows and I am trying to limit them with the perPageValues option, here is my options:
options: {
filterByColumn: false,
filterable:['nickname','email','reg_date','year'],
perPage:100,
perPageValues: [10,25,50,100,500,1000],
texts: {
filter: "Search:",
filterBy: 'Search by {column}',
count: ''
},
dateColumns: ['reg_date'],
dateFormat: 'DD-MM-YYYY',
datepickerOptions: {
showDropdowns: true,
autoUpdateInput: true,
},
pagination: { chunk:10, dropdown: false },
headings: {
id: 'ID',
reg_date: 'Registered',
nickname: 'Nickname',
email: 'Email',
year: 'Registration date',
number: 'Number'
}
}
Everything is working fine, but the list of limitation-values showing only the first two elements:
No errors were provided in the console and the table filtering through this combobox is working without any possible issues.
The only thing is, when I am using a small values in the perPageValues option like this:
perPageValues: [1,3,6,7,9,11,13],
The full list of values is shown and everything is working correctly:
I conducted an observation and found that every number after 20 are not showing at all (from time to time).
Can you please give some advice to know which thing could provoke this issue?
Is it possible to fix this without fixing a plugin sources e.t.c.?
p.s. I am using this vue component without any other settings or components, in the test mode so there is no plugins incompatibility of versions e.t.c.
Thanks!
it's possible that that happens because you do not have that amount of records
you can try this
in your css:
.VueTables__limit {
display: none;
}
this will make the default selector disappear
in your vue template adds a new select:
<select #change="$refs.table.setLimit($event.target.value)">
<option value="10">5</option>
<option value="10">10</option>
<option value="20">20</option>
</select>
add the reference in the table you are generating
<v-client-table ref="table" :options="yourOptions" :data="yourData" :columns="yourColumns" ></v-client-table>
JSfiddle:
https://jsfiddle.net/jfa5t4sm/1868/
This isn't an answer to the question but if anyone ends up here wondering how to turn off the "Records:" dropdown completely via the options, you can do it like this...
options: {
perPage: 5,
perPageValues: [],
}
I am using datatable 1.9 . I am facing problem in searching. My table look something like this
<'table> <'td> <'div><'span class="inlineEditCategory" >category<'/span><'/div> <'/td> <'/table>
So if I search on the word like div, span then all rows are is shown which should not. I figure out that content between td is being searched. Is their any way to search only the text part.
You can use the html filtering plugin.
Include the js file after the inclusion of datatables.js main script.
And the use the plugin like this in your datatable initialization:
$('#example').dataTable({
"columnDefs": [
{ type: "html", target: 0 }
]
});
You can also do this with the aoColumn option like this:
$('#example').dataTable( {
"aoColumns": [
{ "sType": "html" },
....
]
} );
For more info see the documentation