在使用Vue進行開發時，我們可能會遇到一個問題——change事件失效。

這種問題的出現通常是因為以下原因之一：

<select>
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>

這段代碼可以生成一個下拉框，并綁定了一個v-model指令。當用戶在下拉框中選擇一個選項時，應該會觸發change事件。

但是實際上，什么都沒有發生。這是因為，Vue在渲染過程中，會使用v-show指令將下拉框隱藏。而當用戶選擇一個選項時，change事件是在下拉框被隱藏的情況下觸發的，因此無法被監聽到。

解決這個問題的方法有很多。其中一種方法是使用v-if指令代替v-show指令：

<select v-if="showSelect">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>

這樣做可以確保在用戶選擇選項時，下拉框是可見的，change事件可以被監聽到。

另一種方法是使用自定義指令：

Vue.directive('my-on-visible', {
bind: function (el, binding, vnode) {
if (getComputedStyle(el).display === 'none') {
el.style.visibility = 'hidden'
var timer = setInterval(function () {
if (getComputedStyle(el).display !== 'none') {
el.style.visibility = ''
timer && clearInterval(timer)
binding.def.listener.call(vnode.context, el)
}
}, 100)
} else {
binding.def.listener.call(vnode.context, el)
}
},
update: function (el, binding, vnode, oldVnode) {
this.bind(el, binding, vnode)
},
unbind: function (el, binding, vnode, oldVnode) {
// clear something
},
listener: function (el) {
var self = this
el.addEventListener('change', function (event) {
self.$emit('my-on-visible', event)
})
}
})

這個自定義指令可以確保在下拉框可見時，change事件可以被監聽到。

無論哪種方法，我們都可以解決這個問題。但是，我們需要注意，在實際開發中，我們應該盡可能地避免使用這種情況，以確保代碼的可讀性和可維護性。