#if (unit.unitNum != null)
{
<div>#unit.unitNum - #unit.type</div>
}
Is there a way to right conditional within div element?
I have to write conditional for unit.type too so it will be many ifs.
Yes you can write a conditional within a div element.
<div>
#if(unit.unitNum != null)
{
#unit.unitNum - #unit.type
}
else {
#* just do whatever you want here or don't write an else clause *#
}
</div>
Note that you can also use String interpolation
<div>
#if(unit.unitNum != null)
{
#($"{unit.unitNum} - {#unit.type}")
}
</div>
You could even simplify this a bit more. Also since you didn't specify this, the type of unit.unitNum doesn't really matter here, e.g. it could be an int, or a string.
<div>
#($"{(unit.unitNum != null ? unit.unitNum : "no number found")} - {#unit.type}")
</div>
Related
Here's my code:
<div v-for="(message) in messages">
<div class="message-divider sticky-top pb-2" data-label="Test"> </div>
...
What I need to achieve is, if current iteration's message.createdAt.seconds differs by day from the previous one to show message-divider element.
So the time format is in seconds like this: 1621515321
How can I achieve this?
You can do variable assignment as part of the template, so you could assign the previous value and compare, but this is not a very good idea. Instead you can use a computed to prepare your array to only have the objects you want, with the data you need. So in this case, you could use a computed to create a new array with objects that have additional flags like className or showDivider etc.
example:
computed:{
messagesClean(){
let lastCreatedAt;
return this.messages.map(message => {
const ret = {
...message,
showDivider: lastCreatedAt + 3600*24 < message.createdAt.seconds // your custom logic here
}
lastCreatedAt = message.createdAt.seconds
return ret
}
}
}
the logic to determine when the divider gets shown is up to you there, I suspect it may be a bit more complicated than differing by a day.
You need something like this:
<div v-if="compEqRef">
OK
</div>
<div v-else >!!OK!!</div>
Here compEqRef could be in computed:
computed: {
compEqRef() {
//do something
}
},
I have an array of names, and if a user try to update one of them and is duplicate, I want to do something (error message) The problem is that is always duplicate. Pname will be changed on every keypress. I am not sure how to store the initial array and to compare with it.
<input
v-model="Pname"
type="text"
class="form-control"
/>
for(let element of this.customer_names){
if(this.Pname == element.name){
duplicateValue = +1;
}
}
You can do something as simple as:
if(this.customer_names.indexOf(this.Pname) != -1) {
// there is a duplicate somewhere
}
Put that code in your change/key-up event listener
You can use #blur like this:
<input
v-model="Pname"
type="text"
class="form-control"
#blur="findDuplicate"
>
function findDuplicate () {
if(this.customer_names.indexOf(this.Pname) != -1) {
// There is a duplicate
}
}
So, by this when you click outside, after you are done with typing, it will run that findDuplicate function.
On an ASP.NET Core 2.1 view I have the following:
<div #{if (1==1) { <text>style="background-image: url('image.png')"</text> }}></div>
Note: I am using 1==1 just for testing ...
This renders fine but I need to apply this to body tag:
<body #{if (1==1) { <text>style="background-image: url('image.png')"</text> }}>
In this case I get the error:
The tag helper 'body' must not have C# in the element's attribute declaration area.
How to solve this?
What you are writing doesn't seem to result in valid HTML.
Here are a few ideas (in order of complexity) to get you started.
Traditional conditional
<body>
#if (1 == 1)
{
<div style="background-image: url('image.png')"></div>
}
else
{
<div></div>
}
</body>
Ternary Operator
<div style="#((1 == 1) ? "background-image: url('image.png')" : "")"></div>
Move logic to separate block
#{
var divStyle = "";
if (1 == 1)
{
divStyle = "background-image: url('image.png')";
}
}
<div style="#divStyle"></div>
Logic done server side and stored in model
#model MyViewModel
<div style="#Model.DivStyle"></div>
Inject service into View (Dependency Injection)
#inject StyleService _styleService
<div style="#_styleService.GetStyleIfTrue(1 == 1)"></div>
I try to add conditionally a data attribute value to my vue list on loop and I try the following
<ul data-parent="{{model.parent_id !== null ? model.parent_id : 0}}"></ul>
but in this case the list do not renders anymore, if dump out outside html tag {{model.parent_id !== null ? model.parent_id : 0}} than I see the correct output
Use : before that and I would create a computed property like this.
computed: {
parentId() {
if (this.model.parent_id !== null)
return this.model.parent_id
return 0;
}
}
<ul :data-parent="parentId"></ul>
The right Syntax
<ul :data-parent="{{(model.parent_id !== null) ? model.parent_id : 0}}"></ul>
I want to create a complex condition to pass to the v-if directive.
I have tried the following.
<div v-if="(order.order_products[key].statuses[0].id) != 3 || order.status != 3" >
Can I add a complex condition in Vue's v-if? This is not working.
I also tried with && but that wasn't working, either. I haven't found anything in the documentation about this.
Firstly, to answer your question.
Can I add a complex condition in Vue's v-if?
You can pass an arbitrary JavaScript expression to the v-if directive in Vue, including a complex boolean expression which contains operators || or &&.
You can test this on your own. For example, try having the following template.
<div v-if="true && false">I am not visible!</div>
Of course, you might try out something less trivial, too:
<div v-if="1 == 2 || (1 + 2 == 3 && 4 == 4)">I am visible!</div>
Your expression looks good, but based on the provided information it's impossible to deduce what exactly is wrong.
Your problem is something else: maybe the data is not in the format you thought it would be, or maybe your logic has a flaw in it.
Yes, you can set complex condition. I suggest you to use Vue computed fields, so you will have better highlight (through Vue Devtools) of variables which use in v-if expression. I suppose that order is data field, so you can set computed fields like this:
computed: {
orderStatusId: function () {
// Write some checks is variable defined/undefined
return this.order.order_products[key].statuses[0].id
},
orderStatus: function () {
return this.order.status
}
}
and v-if expression should look like this:
<div v-if="orderStatusId !== 3 || orderStatus !== 3" >
In this approach you can review values of variables in your v-if expression.
Yes, you can use any JavaScript expresion inside v-if quotes.
But I recommend you to create a function or computed function and to call it inside your if statement, for better readability.
ex:
computed: {
shouldDisplay: function () {
return this.order.order_products[key].statuses[0].id) !== 3 || this.order.status !== 3;
}
...
}
<div v-if="shouldDisplay"> ... </div>
v-if="(segmento != 4) && (segmento != 2) && (segmento != 8)"
Works like a breeze for me!