style.display 在 Vue JS 样本项目中不起作用

Question

我正在完成一个渐变色板项目，然后是重新发布功能的最后一点。我有两种名称形式，一种用于在按键上主要创建样本，并希望将另一种用于编辑功能，通过按钮运行，但名称仍然在输入 aswwell 时收集。我试图隐藏第一个表单（完全不使用）并显示第二个要使用的表单。 表单如下所示：

 <b-form-input
        id="name"
        size="lg"
        type="text"
        class="search-bar-2"
        placeholder="Name Your Swatch, Enter Hit the Save Edit Button"
        v-model="value3"
        @keypress="republishSwatch"
        >
</b-form-input>

并且 republishSwatch 方法也被设置为保存按钮中的单击功能。但是在这里我只是想显示表单，当前代码不起作用，它似乎没有得到元素“search-box-2”的类。代码是显示编辑按钮，它有效，并隐藏/显示替代形式，第一个形式与上面的类 search-box-1 相同。我可以给他们一个不同的 id，因为名字需要它。

   let oldForm = document.querySelector('.search-box-1');
   let newForm = document.querySelector('.search-box-2');
   let saveEditBtn = document.getElementById('saveBtn');
   saveEditBtn.style.display = 'block';
   oldForm.style.display = 'none';
   newForm.style.display = 'block';

在 css 中，第二种形式是隐藏的，“显示：无！重要”必须使用重要，否则它不会隐藏。它的 Bootstrap Vue，如果我可以让它工作，虽然我可能只是在一个函数中收集名称并通过按钮在重新发布函数中运行它。

欢迎任何提示

谢谢

Answer 1

您应该依赖v-show 或v-if 进行条件渲染。

您可以将data 中的变量设置为true 并将其用于显示/隐藏字段。

<b-form-input
        id="name"
        size="lg"
        type="text"
        class="search-bar-2"
        placeholder="Name Your Swatch, Enter Hit the Save Edit Button"
        v-model="value3"
        @keypress="republishSwatch"
        v-show="shouldShow"
        >
</b-form-input>

从按钮上的侦听器内部设置shouldShow。

在极少数情况下您应该直接操作 DOM。