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

Question

我正在完成一个渐变样例项目，直到最后一点重新发布函数。我有两个名称表单，一个用于在按键时创建样本，另一个用于编辑功能，通过一个按钮运行，但名称仍然在enter 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中，第二个表单被隐藏为"display: none! important“，必须使用important，否则它不会隐藏。它的Bootstrap Vue，如果我可以让它工作，我可能只需要在一个函数中收集名称，然后通过按钮在republish函数中运行它。

欢迎任何建议

谢谢

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。