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
}
}
Related
Initially I setted the text as list in use-state and it change to grid when I click on it.How to show the list again when I click?
const [buttonText, setButtonText] = useState('List');
function handleClick() {
setButtonText('Grid');
};
This is the use-state and the function that changes the text.Can anyone help me ?
You can call same method and use ternary operator (check your current state and setState according to it).
function handleClick() {
setButtonText(buttonText == 'Grid' ? 'List' : 'Grid');
};
I am rendering two texts based on a condition and be able to pass methods to the click event based on the condition. The default text is ADD TO COLLECTION because initially hasPaid property is false. Once payment has been made, I want to set that property to true
The function addToCollection first opens a modal, on the modal, the handlePayment function is implemented. I have been able to conditionally render the div to show either ADD TO COLLECTION or DOWNLOAD using v-on="". I also return hasPaid property from the handlePayment function.
<div class="float-right peexo-faded-text card-inner-text" :face="face" v-on="!hasPaid ? {click: addToCollection} : {click: handleDownload(face)}">
{{!hasPaid ? 'ADD TO COLLECTION': 'DOWNLOAD' }}
</div>
data: function () {
return {
hasPaid: false,
}
},
addToCollection(){
this.showcollectionModal = true;
},
handlePayment(){
this.showcollectionModal = false;
let accept = true;
this.showpaymentsuccessmodal = true;
//this.hasPaid = true;
return {
hasPaid: accept
}
},
I want to be able to set hasPaid property on the handlePayment function for the render function to pick it, so that the handleDownload function can then work.
The last section of this bit is going to be problematic:
v-on="!hasPaid ? {click: addToCollection} : {click: handleDownload(face)}"
When hasPaid is true it will invoke the method handleDownload immediately. That is, it will be called during render, not when the <div> is clicked.
You could fix it by 'wrapping' it in a function:
{click: () => handleDownload(face)}
I've used an arrow function in my example but you could use a normal function if you prefer.
Personally I wouldn't try to do this using the object form of v-on.
My first instinct is that you should consider just having two <div> elements and use v-if to decide which one is showing.
If you did want to use a single <div> I would put the click logic in a method. So:
<div class="..." :face="face" #click="onDivClick(face)">
Note that despite the apparent syntactic similarity to the way you defined your click listener this won't invoke the method immediately.
Then in the methods for the component:
methods: {
onDivClick (face) {
if (this.hasPaid) {
this.handleDownload(face)
} else {
this.addToCollection()
}
}
}
I have Vue.js application and there is a component with the code as following:
1) In "template" section:
<panel
:collapsible="true"
title="Basic section"
:iscollapsed="false"
class="category-panel"
:class="className"
>
2) In "data" section:
className: '',
3) In "methods" section:
toggleColor () {
if (!this.document.docDate) {
this.className = 'panel >>> .panel-title-red'
}
},
async save () {
this.toggleColor()
...
}
4) In "style" section:
.panel >>> .panel-title
font-weight 400
.panel >>> .panel-title-red
font-weight 400
color red
The panel's title uses first class in "style" section, which means the color of panel's title is black. When I click "save" button I call toggleColor method and under some condition I want to change the color to red. It doesn't work in this way. How to make it work?
You can set className by using :class="{'your-class-name': isAllowed}" pattern.
<panel
:collapsible="true"
title="Basic section"
:iscollapsed="false"
class="category-panel"
:class="{'panel-title-red': isColorToggled}"
>
...
// data
isColorToggled : false,
...
// methods
toggleColor () {
if (!this.document.docDate) {
isColorToggled = true;
}
},
Presumably your title has its own element inside the panel component. You won't be able to add a CSS class directly to that element from outside the panel, you can only add classes to the panel's outer element. To add a class to the inner element you would expose a suitable prop on the panel and let the panel handle the styling.
However, to get it working using something similar to the code you had in the question you'd need to change this:
this.className = 'panel >>> .panel-title-red'
Trying to set the class to a selector is meaningless. Instead it should be:
this.className = 'panel-title-red'
That will put the class panel-title-red on the outermost element of the panel. That might not be the element you wanted but it's the best we can do from outside the panel. You'd then need suitable CSS to get that to take effect:
.panel-title-red >>> .panel-title
font-weight 400
color red
I'm assuming that will be going through a pre-processor as it isn't actually valid CSS but it is consistent with the code you posted.
I use vue-chartjs to draw some chart like line, bar, etc.
In my project, there are many cases using specific value or lable of data in chart.
Using tooltip option of vue-chartjs, I can check that value or label of data item when hovered.
I want to know how to access or get information of specific data matched with point on graph when clicked(not hovered).
Here is my code about chart options.
chartOptions: {
responsive: false,
onClick: function(evt){
//Some logic to get value of label of specific data...(type, label, value, ...)
}
In my case, I use 'onclick' option to access specific data on point triggered 'click' event. In 'onClick' callback, I checked all of chart elements and dataset, etc.
How can I get value of label specific dataItem on point of graph(like line) or bar of graph(like bar) when triggered click event?
I was not able to find a solution that worked for me, but I dug a little bit and this is what I came up with.
onClick: function(evt, array) {
if (array.length != 0) {
var position = array[0]._index;
var activeElement = this.tooltip._data.datasets[0].data[position]
console.log(activeElement);
} else {
console.log("You selected the background!");
}
}
This will get the position in the array that you clicked and grab the data from what position you clicked. This may not be the prettiest or best example, but it worked for me.
This solution use the getElementAtEvent method of chartjs, but to use that you need reference to the Chart itself, not the Vue component. We can get that from the $data._chart property. To use this in a parent Vue component, we use the $refs as seen below`.
So parent defines the chart options
{
...
options: {
onClick: this.handleChartClick
}
...
}
and then parent method, using $refs with $data._chart to get the chart. We get the datasetIndex and value and also the tooltip
handleChartClick(evt, elements) {
var chart = this.$refs.periodChart.$data._chart;
const chartIndex = chart.getElementAtEvent(evt);
if (chartIndex.length !== 0) {
const datasetIndex = chartIndex[0]._datasetIndex;
const position = chartIndex[0]._index;
const info = {
datasetIndex: datasetIndex,
valueIndex: position,
label: chart.tooltip._data.labels[position],
value: chart.tooltip._data.datasets[datasetIndex].data[position]
};
console.log(info);
} else {
console.log("Background clicked");
}
I'm developing an application for SailfishOS using the QML language.
I want to dynamically set the id property of a Label by using an if condition.
This is my code:
Label {
id: {
if(myBool == false) {
thisText()
} else {
notThatText()
}
}
width: parent.width
horizontalAlignment: Text.AlignRight
text: ""
font.pixelSize: Theme.fontSizeLarge
}
This code is placed into my CoverPage.qml file, the one that display things on the application's cover while in background.
By doing this, the cover is simply black, nothing is displayed.
Is it possible in QML to do this?
Thanks in advance!
The Qt doc says this.
While it may look like an ordinary property, the id attribute is not an ordinary property attribute, and special semantics apply to it;
You cannot set the id of a QML component at runtime.(Correct me if I am wrong). You might find objectName property useful. But I don't understand why you are trying to assign dynamic id.
I have a use case where use a dynamic/specific id could be useful. The id could be view with Gammaray, it can help for debugging.
GridLayout {
id: layout
Repeater {
model: foo
Bar {
id: bar_X_Y // bar_{model.row}_{model.column}
}
}
}
But as far as I know, it's not possible.