[Vuejs]-V-if in a bootsrap vue form

by

1👍

Because your 2 situations(v-if/v-else) are very different, you should duplicate your b-form-input, by this way, you give v-if to the 1st one and v-else to the other one.

<template>
<b-form-input
    v-if=""
    placeholder="Name Your Swatch and Enter to Save"
    @keypress="publishSwatch"
/>
<b-form-input
    v-else
    placeholder="Name Your Swatch, Enter and Save Edit"
    @keypress="republishSwatch"
    v-model="value3"
    ref="value3"
    id="name"
    size="lg"
    type="text"
    class="search-bar"
/>
</template>

With simpler examples, i.e. only a the placeholder which changes, you could do that

<template>
<b-form-input
    :placeholder="test ? placeholder1 : placeholder2"
/>
</template>

<script>
export new Vue({
    data() {
        return {
            test: true,
            placeholder1: 'hi',
            placeholder2: 'bye',
        };
    }
});
</script>

If you mutate test, the input placeholder will automatically change.

👤Shizzen83

Leave a comment