iview select 使用 v-model 如何解决设置默认值无效？

Question

问题描述

在对话框（modal）中放一个 form，form 中有一个 select 控件。期望每次打开该 modal 时，select 都处于未选择状态，而不是上一次选择之后的值。

相关代码

<i-button
        type="info"
        size="small"
        @click="open()">打开
</i-button>
<modal title="编辑"
       v-model="show">
    <i-form :model="formItem" :label-width="80">
        <form-item label="请选择列">
             <i-select v-model="formItem.selection" @on-change="select">
                  <i-option v-for="item in columns" :value="item.key" :key="item.key">{{ item.title }}</i-option>
             </i-select>
        </form-item>
    </i-form>
</modal>

<script>
    new Vue({
        el: '#app',
        data: {
            show: false,
            formItem: {
                selection: ''
            },
            columns: [
                {
                    key: 'sex',
                    title: '性别'
                },
                {
                    key: 'age',
                    title: '年龄'
                }
            ]
        },
        methods: {
            open: function() {
                this.show = true;
                this.formItem.selection = ''
            },
            select: function(selection) {
                ...
            }
        }
    })
</script>

上面这段代码，当我执行 this.selection = '' 时，select 并没有重置！

Answer 1

楼主可以试试下面这种写法：

...
open: function() {
    this.show = true;
    // 这里应该是 this.formItem.selection
    this.formItem.selection = ''
},
...

Answer 2

试一下这种呢？

this.$set(this.formItem, "selection", "");

Answer 3

请问问题解决了么 我也是数据不更新