How to succesfully chain V-If Statements in a component?-CodePudding

I have a component in which I only want the attributes to be selectable when Selectable is equal to true, to keep my code concise I thought to use V-if & V-else, but my chaining isn't working, despite "selectable" being true, when I chain I lose all results from within the block, and I'm not sure how I should structure it while keeping it concise. Code below:

     <template v-if="props.row.primaryAlias" && "selectable">
        <SelectableAttribute attr-name="Alias" :attr-id="props.row.primaryAlias.id" :model-id="props.row.id" model-name="NewParticipant">
          {{ props.row.primaryAlias.value }}
        </SelectableAttribute>
      </template>
      <template v-else>
       {{ props.row.primaryAlias.value }}
      </template>

CodePudding user response：

Your v-if is incorrect. You're doing v-if="props.row.primaryAlias" && "selectable" which will only run the first part: props.row.primaryAlias as you have closed the v-if with a double quote.

What you need is:

v-if="props.row.primaryAlias && selectable"