时间戳

首页 > 解决方案 > V-if 在 bootsrap vue 形式中

vue.js - V-if 在 bootsrap vue 形式中

问题描述

我正在尝试在引导 vue 表单中呈现不同的表单元素（占位符和提交操作）。这是表格：

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

这有效，默认表单显示、收集名称等并运行 publishSwatch 函数。当有人使用 setName 或 republishSwatch 函数编辑样本并更改颜色/名称时，我想使用的另一种形式，因此需要某种条件来显示它而不是默认的。此时，保存编辑（id saveBtn）按钮显示在 DOM 中（单击编辑按钮后显示）所以想知道我是否可以以某种方式将其用作条件参考，因为它通常不存在。目前那里的条件似乎没有做任何事情，默认形式显示，这是我想要开始的。

欢迎任何提示

谢谢

标签： vue.js

解决方案

因为你的两种情况（v-if/ v-else）非常不同，你应该复制你的b-form-input，通过这种方式，你给v-if第一个和v-else另一个。

<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>

用更简单的例子，即只有一个改变的占位符，你可以这样做

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

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

如果您 mutate test，输入占位符将自动更改。

推荐阅读