I have an bootstrap-vue table in my project.
I want to give each row a link (something like code below)
<template #row>
<div #click="goToPage">
{{ item.name}}
</div>
</template>
but do not know how to access table tr in bootstrap
codesandbox
i would really appreaciate if someone can help me with it
You can add selectable to your table and event row-selected:
<b-table select-mode="single" ref="selectableTable" selectable #row-selected="onRowSelected" small :fields="fields" :items="items" responsive="sm">
and then create method:
methods: {
onRowSelected(item) {
console.log(item)
}
}
You can use the #row-clicked event, which as the name suggests is triggered when a row is clicked.
The method is sent the item for the row which was clicked, so you can access any information from the item if needed. Along with the index and native click event.
new Vue({
el:"#app",
data: () => ({
items: [
{ age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
{ age: 11, first_name: 'Larsen', last_name: 'Shaw' },
{ age: 89, first_name: 'Geneva', last_name: 'Wilson' },
{ age: 38, first_name: 'Jami', last_name: 'Carney' }
]
}),
methods: {
onRowClicked(item, index, event) {
console.log(item)
}
}
});
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap#4.5.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue.js"></script>
<div id="app" class="p-3">
<b-table striped hover :items="items" #row-clicked="onRowClicked"></b-table>
</div>
I want to start using the introduced in this tutorial. The problem is that that I don't know how to make the tag to work on my website. The explanation that is given in the tutorial on how to do that is very vague and as a beginner, I can't make it work.
I installed bootstrap and bootstrap-vue and added the .css and .js files the following way:
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-vue.min.css">
<script src="js/bootstrap-vue.min.js"></script>
However, I don't think any of these add the tag, because when I try to implement it, it is not appearing. At the bottom of the tutorial linked above, there is a section that gives information on how to import single elements. I tried to use the lines of code provided there but it did not change anything. Please, help me.
On BootstrapVue website you will find everything you need in order to use it.
Your case is listed under #Browser section of Getting Started. Make sure you add all those dependencies to your page's <head>.
And, as for using it, you have to initialize a Vue instance on window.load event, at the earliest.
Example:
window.onload = () => {
new Vue({
el: '#app',
data() {
return {
perPage: 3,
currentPage: 1,
items: [
{ id: 1, first_name: 'Fred', last_name: 'Flintstone' },
{ id: 2, first_name: 'Wilma', last_name: 'Flintstone' },
{ id: 3, first_name: 'Barney', last_name: 'Rubble' },
{ id: 4, first_name: 'Betty', last_name: 'Rubble' },
{ id: 5, first_name: 'Pebbles', last_name: 'Flintstone' },
{ id: 6, first_name: 'Bamm Bamm', last_name: 'Rubble' },
{ id: 7, first_name: 'The Great', last_name: 'Gazzoo' },
{ id: 8, first_name: 'Rockhead', last_name: 'Slate' },
{ id: 9, first_name: 'Pearl', last_name: 'Slaghoople' }
]
}
},
computed: {
rows() {
return this.items.length
}
}
})
}
<!-- Add this to <head> -->
<!-- Load required Bootstrap and BootstrapVue CSS -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.css" />
<!-- Load polyfills to support older browsers -->
<script src="//polyfill.io/v3/polyfill.min.js?features=es2015%2CIntersectionObserver" crossorigin="anonymous"></script>
<!-- Load Vue followed by BootstrapVue -->
<script src="//unpkg.com/vue#latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.min.js"></script>
<!-- Example #app template -->
<div id="app">
<template>
<div class="overflow-auto">
<b-pagination
v-model="currentPage"
:total-rows="rows"
:per-page="perPage"
aria-controls="my-table"
></b-pagination>
<p class="mt-3">Current Page: {{ currentPage }}</p>
<b-table
id="my-table"
:items="items"
:per-page="perPage"
:current-page="currentPage"
small
></b-table>
</div>
</template>
</div>
I want to display checktext on paper-dialog with only vehiclename from checkarray and on console i want to display checktext with all the objects from checkarray. Currently, on paper-dialog only Truck value comes on clicking any papaer-checkbox
<template is="dom-repeat" items="{{checkdata}}">
<paper-checkbox on-tap="checkall" checked="{{item.checked}}">{{item.name}}</paper-checkbox>
</template>
Property:
checkdata: {
type: Array,
value: [{
name: 'Bike',
no: 1,
}, {
name: 'Car',
no: 2,
}, {
name: 'Cycle',
no: 3,
}, {
name: 'Bus',
no: 4,
}, {
name: 'Truck',
no: 5,
}],
}
Javascript:
checkall: function() {
var checkvalue = this.checkdata;
var checktext = [];
for (i = 0; i < checkvalue.length; i++) {
var checkarray = {
vehiclename: checkvalue[i].name,
vehiclenumber: checkvalue[i].no,
};
if (checkvalue[i].checked == true) {
checktext.push(checkarray);
}
}
this.checkeditem = checkarray.vehiclename;
console.log(checktext);
}
I have replied this question pre stage before. Now I could not understand exactly what you really want to do more, hope this will help!
<html>
<head>
<base href="https://polygit.org/polymer+:master/components/">
<link href="polymer/polymer.html" rel="import">
<link rel="import" href="paper-checkbox/paper-checkbox.html">
<link rel="import" href="paper-button/paper-button.html">
<link rel="import" href="paper-progress/paper-progress.html">
<link rel="import" href="paper-dialog/paper-dialog.html">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
</head>
<body>
<my-test>test</my-test>
<dom-module id="my-test">
<template>
<style>
:host {
display: block;
height: 100%;
}
</style>
<div>
<template is="dom-repeat" items="{{checkdata}}">
<paper-checkbox checked="{{item.checked}}" on-change='checkedChenged'></paper-checkbox>
<span>{{item.name}}</span> <br/> <br/>
</template>
<paper-dialog id="dialog">
<h2>Selected Vehicle: {{vehicle}}</h2>
<div class="buttons">
<paper-button dialog-confirm autofocus on-tap='uncheckAll'>Tap me to close</paper-button>
</div>
</paper-dialog>
<paper-button on-tap="checkAll" raised>Check All</paper-button>
<paper-button on-tap="uncheckAll" raised>Uncheck All</paper-button>
<paper-button on-tap="togglecheckAll" raised> Toggle Check/Uncheck</paper-button>
</div>
</template>
<script>
HTMLImports.whenReady(function() {
class MyTest extends Polymer.Element {
static get is() { return 'my-test'; }
static get properties() { return {
vehicle:String,
checkdata:{
type: Array,
value() {return [{name: 'Bike'}, {name: 'Car'}, {name: 'Cycle'}, {name: 'Bus'}, {name: 'Truck'}
]}
}
}}
static get observers() {return [
'checkCheckdata(checkdata)']}
// set this element's employees property
constructor() {
super();
}
checkCheckdata(d){
// console.log('data : ',d)
}
checkAll() {
let checkdata=[];
this.checkdata.forEach((i,x)=> {
checkdata.push({"name": i.name, "checked": true});
if (x==this.checkdata.length-1){
this.set('checkdata', checkdata);
}
})
}
uncheckAll() {
let checkdata=[];
this.checkdata.forEach((i,x)=> {
checkdata.push({"name": i.name, "checked": false});
if (x==this.checkdata.length-1){
this.set('checkdata', checkdata);
}
})
}
togglecheckAll() {
let checkdata=[];
this.checkdata.forEach((i,x)=> {
checkdata.push({"name": i.name, "checked": !i.checked});
if (x==this.checkdata.length-1){
this.set('checkdata', checkdata);
}
})
}
checkedChenged(i) {
this.vehicle= i.model.item.name;
this.$.dialog.open();
}
}
customElements.define(MyTest.is, MyTest);
});
</script>
</dom-module>
</body>
</html>
DEMO (at Codepen)
I'd like to create a control that converts the data into something I need.
At the moment, I solve this with a global variable. The code looks something like this:
(The lowercase functionality is only to demonstrate it in a simple way. Usually I want to use it for arrays of objects. e.g. to get distinct values of certain names and ids)
<dom-module id="my-tolower">
<script>
"use strict";
Polymer({
is: 'my-tolower',
properties: {
input: {
type: String,
value: "",
},
output:{
type: String,
value: "",
notify: true,
}
},
observers:[
"_inputChanged(input)",
],
_inputChanged: function(newInput, oldInput){
this.set("output", newInput.toLowerCase());
}
});
</script>
</dom-module>
Usage:
<my-tolower input="[[output.name]]" output="{{lower}}">[[lower]]</my-tolower>
This solution works great if I am only using the variable lower only once. Inside of a <dom-repeat>, I get a problem.
How can I easily make a custom variable that is only available inside of my-tolower? Exactly the same way as Polymer's dom-repeat does?
I took a look at the code at Polymer's <dom-repeat> sources, but I have no idea how that works. Is this even possible in a custom element? Do I need to create a custom template?
To explain my problem better I have added a bigger Example that explains my problem in detail.
HTMLImports.whenReady(() => {
Polymer({
is: 'my-app',
ready: function(){
//In my real Problem this value comes from a websocket...
this.devices = [{
name: "PC 1",
components: [
{
name: "HDD1",
processors: [
{
type: "Processor1",
usage: "Dont Know 1"
},
{ type: "Processor1", usage: "DontKnow2"},
{ type: "Processor2", usage: "DontKnow3"}
]
},
{
name: "Another Piece Of Hardware",
processors: [
{
type: "Processor4",
usage: "Dont Know 1"
},
{ type: "Processor3", usage: "DontKnow2"},
{ type: "Processor4", usage: "DontKnow3"}
]
}
]
},
{
name: "PC 2",
components: [
{
name: "My third piece of hardware",
processors: [
{
type: "Processor1",
usage: "Dont Know 1"
},
{ type: "Processor2", usage: "DontKnow2"},
{ type: "Processor3", usage: "DontKnow3"}
]
}
]
}];
//this.devices must not be changed!
}
});
Polymer({
is: 'my-distinct',
properties: {
inputs: {
type: String
},
outputs:{
computed: '_getDistincts(inputs, path)',
notify: true
},
path: {
type: String,
value: ""
}
},
_getDistincts(inputs, path){
let result = [];
for(let key in inputs){
if(inputs.hasOwnProperty(key)){
let x = inputs[key];
if(path && path != ""){
x = x[path];
}
if(result.indexOf(x) < 0){
result.push(x);
}
else{
//Already Exists
}
}
}
return result;
}
});
});
<head>
<base href="https://polygit.org/polymer+1.8.1/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer.html">
</head>
<body>
<my-app></my-app>
As you can see, there is always "Processor1", "Processor2" and "Pocessor3" available although this is only the result of the last computers component. You can see the right result (but with duplicates) if you use the comment I made instead.
<dom-module id="my-app">
<template>
<ul>
<template is="dom-repeat" items="[[devices]]" as="device">
<li>[[device.name]]
<ul>
<template is="dom-repeat" items="[[device.components]]" as="component">
<li>[[component.name]]
<ul>
<!-- This is my code with using distinct -->
<my-distinct inputs="[[component.processors]]"
outputs="{{distinctProcessorNames}}"
path="type">
<template is="dom-repeat" items="[[distinctProcessorNames]]" as="processorName">
<li>[[processorName]]
<!-- Here I could iterate over all processors (filtered) and list their usages-->
</li>
</template>
</my-distinct>
<!-- This is my code without using distinct. -->
<!--template is="dom-repeat" items="[[component.processors]]" as="processor">
<li>[[processor.type]]
<ul>
<li>Used for [[processor.usage]]</li>
</ul>
</li>
</template-->
</ul>
</li>
</template>
</ul>
</li>
</template>
</ul>
</template>
</dom-module>
</body>
Demo
You are using 2 different Polymer custom elements <my-app> and <my-distinct>.
Therefore you should declare the second one with its proper <dom-module> statement:
<dom-module id="my-distinct">
<template>
<template is="dom-repeat" items="[[outputs]]" as="processorName">
<li>[[processorName]]
</template>
</template>
</dom-module>
Then use your computed property (based on the attribute value) outputs as the items value of <template is="dom-repeat">.
Demo below:
HTMLImports.whenReady(() => {
Polymer({
is: 'my-app',
ready: function(){
//In my real Problem this value comes from a websocket...
this.devices = [{
name: "PC 1",
components: [
{
name: "HDD1",
processors: [
{
type: "Processor1",
usage: "Dont Know 1"
},
{ type: "Processor1", usage: "DontKnow2"},
{ type: "Processor2", usage: "DontKnow3"}
]
},
{
name: "Another Piece Of Hardware",
processors: [
{
type: "Processor4",
usage: "Dont Know 1"
},
{ type: "Processor3", usage: "DontKnow2"},
{ type: "Processor4", usage: "DontKnow3"}
]
}
]
},
{
name: "PC 2",
components: [
{
name: "My third piece of hardware",
processors: [
{
type: "Processor1",
usage: "Dont Know 1"
},
{ type: "Processor2", usage: "DontKnow2"},
{ type: "Processor3", usage: "DontKnow3"}
]
}
]
}];
//this.devices must not be changed!
}
});
Polymer({
is: 'my-distinct',
properties: {
inputs: {
type: String
},
outputs:{
computed: '_getDistincts(inputs, path)', notify: true
},
path: {
type: String,
value: ""
}
},
_getDistincts(inputs, path){
let result = [];
for(let key in inputs){
if(inputs.hasOwnProperty(key)){
let x = inputs[key];
if(path && path != ""){
x = x[path];
}
if(result.indexOf(x) < 0){
result.push(x);
}
}
}
//console.log( result )
return result;
}
});
});
<head>
<base href="https://polygit.org/polymer+1.8.1/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer.html">
</head>
<body>
<my-app></my-app>
<dom-module id="my-app">
<template>
<ul>
<template is="dom-repeat" items="[[devices]]" as="device">
<li>[[device.name]]
<ul>
<template is="dom-repeat" items="[[device.components]]" as="component">
<li>[[component.name]]
<ul>
<my-distinct inputs="[[component.processors]]" path="type">
</my-distinct>
</ul>
</li>
</template>
</ul>
</li>
</template>
</ul>
</template>
</dom-module>
<dom-module id="my-distinct">
<template>
<template is="dom-repeat" items="[[outputs]]" as="processorName">
<li>[[processorName]]
</template>
</template>
</dom-module>
</body>
As you discovered, properties declared inside a <dom-repeat> (i.e., lower in this case) are not scoped exclusively to the <dom-repeat> or its iterations. Thus, each iteration is overwriting the previous lower value, and lower remains available outside the <dom-repeat>.
However, you could achieve a similar scoping effect by attaching an output property to each item iterator in the <dom-repeat> if item is an Object.
For example, consider an <x-foo> element that takes an input array of Objects and passes each input to <my-tolower>, which writes a new value into _output (an attached property on the iterator):
<template is="dom-repeat" items="[[inputs]]" as="x">
<!-- Attach output to a new property on item (i.e., "_output") -->
<my-tolower input="[[x.input]]" output="{{x._output}}"></my-tolower>
</template>
HTMLImports.whenReady(() => {
Polymer({
is: 'x-foo',
properties: {
inputs: Array
},
_toObjArray: function(inputs) {
// Map inputs into objects so that we can attach properties to each iterator in a dom-repeat
return inputs.map(input => ({input}));
}
});
Polymer({
is: 'my-tolower',
properties: {
input: {
type: String,
value: "",
},
output: {
computed: '_computeOutput(input)',
notify: true,
}
},
_computeOutput: function(input) {
return input.toLowerCase();
}
});
});
<head>
<base href="https://polygit.org/polymer+1.8.1/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer.html">
</head>
<body>
<x-foo inputs='["aLPha", "brAVo", "CHarLiE", "DelTA", "epSiLoN"]'></x-foo>
<dom-module id="x-foo">
<template>
<template is="dom-repeat" items="[[_toObjArray(inputs)]]">
<!-- Attach output to a new property on item (i.e., "_output") -->
<my-tolower input="[[item.input]]" output="{{item._output}}"></my-tolower>
<div>
<span>[[item.input]] -> [[item._output]]</span>
</div>
</template>
</template>
</dom-module>
</body>
demo
In your code, you have a nested object, used in nested dom-repeats. The same technique from above can be applied at each nesting level, but your example only needs it at the innermost level. You could give <my-distinct>.outputs its own "local" variable by attaching the output to the iterator (i.e., component):
<my-distinct outputs="{{component.distinctProcessorNames}}" ...>
Then, you'd use that in your inner dom-repeat like this:
<template is="dom-repeat" items="[[component.distinctProcessorNames]]" ...>
HTMLImports.whenReady(() => {
Polymer({
is: 'my-app',
ready: function(){
this.devices = [{
name: "PC 1",
components: [
{
name: "HDD1",
processors: [
{
type: "Processor1",
usage: "Dont Know 1"
},
{ type: "Processor1", usage: "DontKnow2"},
{ type: "Processor2", usage: "DontKnow3"}
]
},
{
name: "Another Piece Of Hardware",
processors: [
{
type: "Processor4",
usage: "Dont Know 1"
},
{ type: "Processor3", usage: "DontKnow2"},
{ type: "Processor4", usage: "DontKnow3"}
]
}
]
},
{
name: "PC 2",
components: [
{
name: "My third piece of hardware",
processors: [
{
type: "Processor1",
usage: "Dont Know 1"
},
{ type: "Processor2", usage: "DontKnow2"},
{ type: "Processor3", usage: "DontKnow3"}
]
}
]
}];
}
});
Polymer({
is: 'my-distinct',
properties: {
inputs: {
type: String
},
outputs:{
computed: '_getDistincts(inputs, path)',
notify: true
},
path: {
type: String,
value: ""
}
},
_getDistincts(inputs, path){
let result = [];
for(let key in inputs){
if(inputs.hasOwnProperty(key)){
let x = inputs[key];
if(path && path != ""){
x = x[path];
}
if(result.indexOf(x) < 0){
result.push(x);
}
else {
//Already Exists
}
}
}
return result;
}
});
});
<head>
<base href="https://polygit.org/polymer+1.8.1/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer.html">
</head>
<body>
<my-app></my-app>
<dom-module id="my-app">
<template>
<ul>
<template is="dom-repeat" items="[[devices]]" as="device">
<li>[[device.name]]
<ul>
<template is="dom-repeat" items="[[device.components]]" as="component">
<li>[[component.name]]
<ul>
<my-distinct inputs="[[component.processors]]" outputs="{{component.distinctProcessorNames}}" path="type">
</my-distinct>
<template is="dom-repeat" items="[[component.distinctProcessorNames]]" as="processorName">
<li>[[processorName]]</li>
</template>
</ul>
</li>
</template>
</ul>
</li>
</template>
</ul>
</template>
</dom-module>
</body>
your demo with updates
You commented that you don't want to clone any objects or modify the input. That's unfortunately not possible with the iterator-property technique described above. The better option in that case is to provide a template for <my-distinct>, which would encapsulate any transformations without affecting the input.
I want to set paper-item as disabled or active according to variants variable. I used dom-repeat to list paper-items. disabled property can be used for this, however it cannot set like these: disabled="true" or disabled="false".
How can I do this?
<paper-listbox attr-for-selected="itemID" selected="{{item.id}}" class="dropdown-content">
<template is="dom-repeat" items="[[variants]]">
<paper-item itemID$="[[item.id]]">[[item.value]]</paper-item>
</template>
</paper-listbox>
Polymer({
is: 'item-create',
properties: {
variants: {
type: Array,
value: [
{id: 1, value: "Color", status: "disabled"},
{id: 2, value: "Number", status: "active"}
]
}
}
});
You could use a computed binding that returns true only when status is disabled:
// template
<paper-item disabled="[[_computeDisabled(item.status)]]">
// script
_computeDisabled: function(status) {
return status === 'disabled';
}
HTMLImports.whenReady(() => {
Polymer({
is: 'x-foo',
properties: {
variants: {
type: Array,
value: () => [{
id: 1,
value: "Color",
status: "disabled"
}, {
id: 2,
value: "Number",
status: "active"
}]
}
},
_computeDisabled: function(status) {
return status === 'disabled';
}
});
});
<head>
<base href="https://polygit.org/polymer+1.11.3/webcomponents+webcomponents+:v0/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="paper-listbox/paper-listbox.html">
<link rel="import" href="paper-item/paper-item.html">
<link rel="import" href="neon-animation/web-animations.html">
</head>
<body>
<x-foo></x-foo>
<dom-module id="x-foo">
<template>
<paper-dropdown-menu>
<paper-listbox attr-for-selected="item-id" selected="{{item.id}}" slot="dropdown-content">
<template is="dom-repeat" items="[[variants]]">
<paper-item item-id="[[item.id]]" disabled="[[_computeDisabled(item.status)]]">[[item.value]]</paper-item>
</template>
</paper-listbox>
</paper-dropdown-menu>
</template>
</dom-module>
</body>
codepen