在 vuejs 中使用列表框的数据绑定问题

Question

当我硬编码如下所示的选择倍数时，脚本和 css 可以工作。

<select data-placeholder="Choose shifts..." class="chosen-select" multiple style="width:350px;" tabindex="4">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
</select>

当我将数据绑定到数据库时，这同样不起作用。我得到一个空的选择框。有时当我调整浏览器大小并刷新时它会起作用代码如下

<select data-placeholder="Choose shifts..." class="chosen-select" multiple style="width:350px;" tabindex="4">
    <option v-for="(shift, index) in shifts" v-bind:value="shift.ID_HORAIRE"> {{ shift.DESCRIPTION_HORAIRE }}</option>
</select>

我正在使用自定义多选。这是link。

Answer 1

这可能是因为如果您尝试从数据库加载 selected 值，您的 <select> 上没有 v-model。

还要确保您的代码用于在创建或安装的钩子中从运行之前到模板渲染检索选择框。

最后，确保您检索到的数据是reactive（放置在 vuex 存储中，或者是您的组件的数据，或者是一个 props）