条件渲染中的VueJS数据列表

Question

当我有一个包含<input list="data-list" ...>的{​​{1}}字段，并且所有内容都包裹在条件渲染中，例如<datalist id="data-list">或v-if="showInput"时，我得到一个错误，并且没有任何效果。只需删除条件渲染即可完成工作，即：

v-bind:class={show : showInput}

<!-- works! -->
<div>
<input list="choices" id="choice" name="choice" placeholder="(select category)" />
<datalist id="choices">
  <option value="foo">foo</option>
  <option value="bar">bar</option>
</datalist>
</div>

在vue组件中有

<!-- does *not* work -->
<div v-if="showChoices">
<input list="choices" id="choice" name="choice" placeholder="(select category)" />
<datalist id="choices">
  <option value="foo">foo</option>
  <option value="bar">bar</option>
</datalist>
</div>

错误（Firefox网络控制台）是：

[Vue警告]：设置道具“列表”失败：值选择无效。 TypeError：“设置仅吸气剂属性“列表””

是否有可能在有条件显示的元素中使用数据列表功能？

编辑要清楚，可能是此问题的另一个根本原因，但如上所述，在我的情况下会发生这种情况。

我看过this和this的示例，这些示例在我的设置中不起作用。