Vue.js IE 中的下拉问题

Question

我使用 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 是计算的属性。 responses 是组件的属性并包含一个对象数组。

Answer 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>

Vue.js IE 中的下拉问题

Vue.js dropdown issue in IE

javascript

internet-explorer

vue.js