IE 中的 Vue.js 下拉问题答案

【问题标题】：Vue.js dropdown issue in IEIE 中的 Vue.js 下拉问题
【发布时间】：2020-05-15 15:41:00
【问题描述】：

我使用 Vue.js 创建了一个表单，用户可以在其中保存他们的答案并返回。我的 Vue 模板中有一个下拉列表，并且 v-model 与计算属性相关联。它在其他浏览器中运行良好，但在 IE 中，下拉菜单未显示页面加载时选择的先前选择的答案。如果他们再次回答，它会正常工作，但我希望显示他们之前选择的答案。

<select class="form-control" v-model="answerLocal" @change="updatedAnswer()">
       <option v-for="option in possibleanswers">
             {{option}}
       </option>
</select>

 computed: {
        answerLocal: {
            get: function () {
                if (this.responses && this.responses.length) {
                    return this.responses[0].value;
                }

                return '';
            },
            set: function (val) {
                if (this.responses.length === 0) {
                    this.responses[0] = { value: '' };
                }
                this.responses[0].value = val;
            }
        }

possibleanswers 是组件的属性，而 answerLocal 是计算属性。响应是组件的一个属性，包含一个对象数组。

【问题讨论】：

你能分享一下你是如何存储/检索answerLocal的吗？
@depperm，我添加了更多代码。如果还有什么有用的，我可以展示更多。
响应从何而来？
@depperm 感谢您的帮助。响应作为属性传递给组件。我使用 Ajax 调用从后端获取它以发送到组件。我实际上只是想出了答案。我也会在下面发布它，但在 html 中的 option 标签中添加了 v-bind:value="option"。

标签： javascript vue.js internet-explorer

【解决方案1】：

我终于找到了解决办法。我需要将 v-bind:value="option" 添加到 html 中的选项标记中。更新了下面的 html。

<select class="form-control" v-model="answerLocal" @change="updatedAnswer()">
       <option v-for="option in possibleanswers" v-bind:value="option">
             {{option}}
       </option>
</select>

【讨论】：

感谢您发布此问题的解决方案。您可以将您的答案标记为已接受的答案。它可以在未来帮助其他社区成员解决类似的问题。感谢您的理解。