I'm trying to implement the condition provided in the code. My last attempt was like in the one in the code.

  <ul class = "details" v-for = "(value, propertyName) in items[this.index]" :key = "value.id">
    <li v-if="{{propertyName}} == 'IndustryIdentifiers'">Data not available</li>
    <li v-else>{{value}}</li>

How can the following be implemented: v-if="{{propertyName}} == 'IndustryIdentifiers'"

1 Answers

skirtle On Best Solutions

The {{ }} syntax is used to wrap a JavaScript expression that should be output as text. It isn't necessary to use the braces to access data in other contexts. In the case of a v-if the attribute value is already an expression and there's no need to include any special characters to pull in data values.

So it'd be just v-if="propertyName === 'IndustryIdentifiers'":

<ul class="details" v-for="(value, propertyName) in items[this.index]" :key = "value.id">
    <li v-if="propertyName === 'IndustryIdentifiers'">Data not available</li>
    <li v-else>{{ value }}</li>

Here I'm assuming that item[this.index] is an object rather than an array, which is implied by the way you've written your loop.

You could also write it like this:

<ul class="details" v-for="(value, propertyName) in items[this.index]" :key = "value.id">
    <li>{{ propertyName === 'IndustryIdentifiers' ? 'Data not available' : value }}</li>

You should also be able to remove the this. from the index unless it's also declared locally.

I also wonder whether you're intentionally creating a separate list for each value, with each list only containing a single item. Difficult to know exactly what you're trying to achieve but I would guess that you want the loop inside the <ul> rather than on the <ul>. If you only have a single <li> (as in my second example) then you could move the v-for onto the <li>. If you want to stick to having two <li> elements with v-if/v-else then you'll need to wrap them in a <template> tag to hold the v-for.