Myujth

In vue, we have got directives v-if which needs to be attached to element.

Is there a way to use conditionals without attaching them to anything like the mustachejs way?

I am looping through an array of words and it is adding div's in every word which is annoying

Here is my template

<div v-for="(str, index) in reference" :key="index">
 <div v-if="patternIncluded(str)">
 <input type="text" v-model="remarks[index]">
 </div>
 <div v-else>
 str
 </div>
</div>

I would be nice if i could do it like this:|

if true
something goes here
else
other thing goes here
if

Here is your code but using the < template > tag

<template v-if="patternIncluded(str)">
 <input type="text" v-model="remarks[index]">
</template>
<template v-else>
 str
</template>

Here is a example from the official Vue documentation:

<template v-if="loginType === 'username'">
 <label>Username</label>
 <input placeholder="Enter your username">
</template>
<template v-else>
 <label>Email</label>
 <input placeholder="Enter your email address">
</template>

More informations: https://vuejs.org/v2/guide/conditional.html#Controlling-Reusable-Elements-with-key

You can also use a Method and use normal Javascript into the < script > at the bottom of your file

Hope this helped, cheers

you could use the 'template' like so:

<template v-if=patternIncluded(str)>
 //code
</template

<template v-else>
 //code
</template>

UPDATE so like this

<div-for="(str, index) in reference" :key="index">
 <template v-if="patternIncluded(str)">
 <input type="text" v-model="remarks[index]">
 </template>
 <template v-else>
 str
 </template>
</div>