未捕获的 ReferenceError：检查未在 onchange 中定义

Question

我试图在选择特定选择选项时显示“expandrepeat”div。 这是我不工作的代码：

<script>
window.check=function(elem) {
    if (elem.selectedIndex == 1) {
        document.getElementById("expandrepeat").style.display = 'block';
    } else {
        document.getElementById("expandrepeat").style.display = 'none';
    }
};
</script>

html:

<div class="information-lane">
<p class="information-title">{{trans.modal.repeat}}</p>
<select class="information-input form-control" onChange="check(this);">
    <option value="-">No repeat</option>
    <option value="-">Daily</option>
    <option value="-">Weekly</option>
    <option value="-">Monthly</option>
    <option value="-">Yearly</option>
    <option disabled="disabled">–––––––––––––––––––––––––––––––––––––––––––––</option>
    <option value="-">Custom...</option>
</select>
</div>
<div id="expandrepeat" style="display:none;">
  <p>Repeat every</p>
  <input>
</div>

Answer 1

如果您是 Vue 新手，您应该阅读有关如何处理事件处理的文档。

您也可以使用v-show而不是手动设置显示属性。

 new Vue({ el: "#app", methods: { check: function(ev) { if (ev.target.value === "custom") document.getElementById("expandrepeat").style.display = 'block'; else document.getElementById("expandrepeat").style.display = 'none'; } } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app" class="information-lane"> <select class="information-input form-control" @change="check"> <option value="-">No repeat</option> <option value="">Daily</option> <option value="-">Weekly</option> <option value="-">Monthly</option> <option value="-">Yearly</option> <option disabled="disabled">–––––––––––––––––––––––––––––––––––––––––––––</option> <option value="custom">Custom...</option> </select> </div> <div id="expandrepeat" style="display:none;"> <p>Repeat every</p> <input> </div>