jquery如何获取vue循环生成的select option选中的值

Question

我现在有个select，里面的option是通过vue循环出来的，现在的问题是通过jquery的代码：

$('#selectedNumber').val()

获取到的值竟然是：

{{item.number}}

请问该如何获取到正确的值呢？

补充select相关的代码如下：

<select id="selectedNumber">
<option v-for="item in data.recent_list" value="{{item.number}}">{{item.open_time|timeFormat}}</option>
</select>

Answer 1

你这个获取的不是{{item.number}}才怪了，vue写法错误，不是value="{{item.number}}"这么写的，应该写成:value="item.number"

Answer 2

把 jQuery 放到 Vue 的 mounted 里执行：

{
    mounted(){
        this.$nextTick(() => $('#selectedNumber').val());
    }
}

如果不能修改 Vue 应用的代码，可以延时执行：

setTimeout(() => {
    $('#selectedNumber').val()
}, 4e3);

Answer 3

数据是异步拿到的？

如果是，可以在异步拿到数据 vue那边赋值了你再用以下方法处理

this.data.recent_list = 异步得到的数据
this.$nextTick(function(){
  $('#selectedNumber').val()
})