Hi am trying to style a div dynamically in VueJs.But facing this problem that the this.currentProgressLevel is not applied to the width property inside the currentStyle object.I am attaching the screenshot of code i am using. The width property is not working when i use ${this.currentProgressLevel *75}px Why it might not be working?When i change the this.currentProgressLevel with 0.33 manually it works but then it will be hardcoded, why the value is not taken from the data variable currentProgressLevel? Below is the code i am using:
In script :
data(){
return{
currentProgressLevel:.33,
currentStyle:{
width: ${this.currentProgressLevel *75}px ,
height:‘6px’,
background:‘green’
}
}}
You should turn currentStyle into computed like this:
computed: {
currentStyle () {
return {
width: `${this.currentProgressLevel *75}px`,
height:‘6px’,
background:‘green’
}
}
}
For reactive data, you should move 'currentStyle' to computed. in this case, you just catch the initial value of 'currentProgressLevel'.
computed:{
currentStyle(){
return {
width: ${this.currentProgressLevel *75}px ,
height:‘6px’,
background:‘green’
}
}
}
Related
I am trying to make a progress bar the progress bar works fine but its not changing text within html and keeps static 0%. N.B I am pasting here only relevant codes to avoid a large page of code.
<div class="progressTopBar"><div class="inner-progressBar" :style="{width: this.ProgressBar }">
#{{ getProgressBar() }}
</div></div>
//property
data: function () {
return {
ProgressBar:"0%",
}
}
//function on change to upload and make progress
fileSelected(e) {
let fd = new FormData();
fd.append('fileInput', $("#file")[0].files[0], $("#file")[0].files[0].name);
axios.post("/admin/chatFileUpload", fd, {
onUploadProgress: function (uploadEvent) {
this.ProgressBar = Math.round((uploadEvent.loaded / uploadEvent.total)*100) + '%';
$(".inner-progressBar").css("width", this.ProgressBar);
}
});
},
//getting progress bar value in text which only returns preset value
getProgressBar() {
return this.ProgressBar;
},
You need to make getProgressBar() a computed property instead of a method.
computed: {
getProgressBar() {
return this.progressBar;
}
}
Also, you should use camel case or snake case for your variables.
The problem is the scoping of this in the code below:
onUploadProgress: function (uploadEvent) {
this.ProgressBar = Math.round((uploadEvent.loaded / uploadEvent.total)*100) + '%';
Because this is a new function it has its own this value, it does not use the this value from the surrounding code.
The simplest way to fix this is to use an arrow function:
onUploadProgress: (uploadEvent) => {
this.ProgressBar = Math.round((uploadEvent.loaded / uploadEvent.total)*100) + '%';
An arrow function retains the this value from the surrounding scope.
I also suggest getting rid of the jQuery line starting $(".inner-progressBar"), that shouldn't be necessary once you fix the this problem as it will be handled by the template instead.
Further, it's unclear why you have a getProgressBar method at all. If it is just going to return ProgressBar then you can use that directly within your template without the need for a method.
Does anyone know how it would be possible to conditional render a view in the list view template based on the passed in bindId ?
I have a template which should show a view only if the value if the label that is passed in is not empty.
<View class="productBannerLabelWrapper productBanner1">
<Label class="productBannerLabel" bindId="productBanner1" />
</View>
The label has a view around it, because the label needs a collared background which is larger than the label itself.
Thank for helping out
When you fill you item array you can set the visible property like this:
var prop = {
productBanner1: {
text: "Text",
visible: (checkValue)?1:0
}
}
items.push(prop);
$.list_section.items = items;
with Alloy:
add a databinding to the visible parameter like productBanner:visible="{isVisible}" and use a dataTransform to change the module before assigning it:
function transformFnc(model) {
return {
otherStuff: model.attributes.otherStuff
isVisible: (checkValue)?1:0
}
}
Working with Vue.js, I do use a simple way to set dynamically the height of a text area that resizes when typing. But I am not able to do it when the component mounts or the value updates.
I have already try http://www.jacklmoore.com/autosize/, but it has the same problem.
I have created a sandbox that shows the problem, when typing the box it updates, but not when the value changes dynamically
Live example: https://codesandbox.io/s/53nmll917l
You need a triggerInput() method:
triggerInput() {
this.$nextTick(() => {
this.$refs.resize.$el.dispatchEvent(new Event("input"));
});
}
to use whenever you're changing the value programatically, triggering the resize logic used on <textarea> on "real" input events.
Updated codesandbox.
Note: Without the $nextTick() wrapper, the recently changed value will not have been applied yet and, even though the input is triggered, the element has not yet been updated and the resize happens before value has changed, resulting in the old height and looking like it didn't happen.
Not really feeling the answers posted here. Here is my simple solution:
<textarea
rows="1"
ref="messageInput"
v-model="message"
/>
watch: {
message: function(newItem, oldItem) {
let { messageInput } = this.$refs;
const lineHeightInPixels = 16;
// Reset messageInput Height
messageInput.setAttribute(
`style`,
`height:${lineHeightInPixels}px;overflow-y:hidden;`
);
// Calculate number of lines (soft and hard)
const height = messageInput.style.height;
const scrollHeight = messageInput.scrollHeight;
messageInput.style.height = height;
const count = Math.floor(scrollHeight / lineHeightInPixels);
this.$nextTick(() => {
messageInput.setAttribute(
`style`,
`height:${count*lineHeightInPixels}px;overflow-y:hidden;`
);
});
},
}
<style scoped>
textarea {
height: auto;
line-height: 16px;
}
</style>
I want to be able to change the value of a checkbox by clicking on it. recentContacts are loading just fine, and specifying initial checked values in the computed function works well. The :on-press seems to change the value but does not reflect in the UI.
Please Help
Template
<nb-list>
<nb-list-item v-for="contact in recentContacts" v-bind:key="contact.uid">
<nb-checkbox :on-press="() => contact.checked =! contact.checked" :checked="contact.checked"></nb-checkbox>
<nb-text>{{contact.firstName}} {{contact.lastName}}</nb-text>
</nb-list-item>
</nb-list>
Code
export default {
computed: {
recentContacts() {
return store.state.admin.userData.recentContacts.map(rc => {
rc.checked = false;
return rc;
});
}
},
}
EDIT:
I am guessing because VUEX is imutable. I've got this to work by having recentContacts inside of the data attribute instead of computed just not how I want to do things.
I have a dashboard which is built using dc.js and i'm using the chart types dc.rowChart and dc.dataTables.
Working Scenario with without conditional formatting:
dc.rowChart - displays Top 50 Customers
dc.dataTable - displays all the fields required and filters the data based on the rowChart.
Working Scenario with conditional Formatting (on datatable rows)
In my HTML, i'm calling the jquery plugin for DataTable (for conditioanl formatting) and here is the code below:
<script>
$(document).ready(function() {
$("#Table").DataTable( {
/*
fnRowCallback: function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
if ($(nRow).find('td:eq(7)').text()<'0') {
$(nRow).find('td:eq(7)').addClass('color');
}
}
*/
columns : [
{ title : "Customer Name" },
{ title : "YoY Rank Change" ,
render: function ( data, type, row ) {
if (data > '0') {
return '<p class="positive">'+data+'</p>';
} else {
return '<p class="negative">'+data+'</p>';
} } },
{ title : "Jan'19 Qty" },
{ title : "Dec'18 Qty" },
{ title : "Nov'18 Qty" },
{ title : "Oct'18 Qty" },
{ title : "Sep'18 Qty" },
{ title : "Aug'18 Qty" }
]
} );
} );
$.extend( true, $.fn.dataTable.defaults, {
"searching": true,
"ordering": false,
"paging": false,
"info": false,
} );
</script>
CSS:
.negative {
background-color:rgba(255,0,0,1.00);
color: #fff;
text-align: center;
}
.positive {
background-color:rgba(50,205,50,1.00);
color: #fff;
text-align: center;
}
ISSUE HERE
When i render the page first time, everything with the datatable with conditional formatting works fine
But when i click on Row Chart to filter datatable based on Customer's, Conditional formatting is gone...
Any help is much appreciated to fix this.
I have tried almost all the stack answers but i'm not able to achieve it.
references used below:
1. How to color code rows in a table dc.datatable?
2. How do I apply conditional formatting using datatables.js?
3. Color code a data table in dc.js
4. How to color code rows in a table dc.datatable? ( This is opted out as i dont want to color code entire row)
#Gordon my survivor at all times.. Looking for your inputs please!!
I see that you are still on dc.js 2.0, so I didn't attempt to port this to dc.datatables.js or dc-tableview. I still think that would be more maintainable.
As I noted in the comments, $.DataTable is a one-way transformation: once you have done this, there is no way to update the table, because dc.dataTable doesn't recognize the DOM structure anymore, and DataTable doesn't have a way to reinitialize.
There might be some smart way to get DataTables to update the data (and this is what the libraries do). It's also madly inefficient to first build a table and then construct a DataTable using the DOM as a data source.
But whatever, let's just get this working by building the DataTable from scratch every time the dc.dataTable is drawn.
The way to do this is to listen for the table's pretransition event, remember if we've already initialized DataTable, and if we have, destroy the old instance:
var dt = null;
table.on('pretransition', function() {
if(dt)
dt.destroy();
dt = $("#dc-data-grid").DataTable( {
// as before
} );
});
Fork of your fiddle. I had to fix a few other things, but I won't go into the details.