Vue.js：下拉框选第三项时显示文本框的实现及问题排查

嘿，我瞅了下你的代码，问题出在事件绑定的位置不对——你把v-on:change绑在了<option>标签上，但实际上下拉选择的change事件是属于整个<select>元素的，单个选项不会触发这个事件，所以你的streamable状态根本没被正确更新~

给你几个靠谱的解决方案，选你顺手的来：

方案1：直接用v-model配合条件判断（最简洁） #

不用额外写方法，直接通过绑定的选中值来控制文本框显示：

<!-- 把change事件移到select上，同时用v-model绑定选中值 -->
<select asp-for="UploadOption" name="UploadOption" v-model="selectedOption">
  <option value="1" name="img">PNG/JPG/WEBP image</option>
  <option value="2" name="video">GIF/APNG/WEBM video</option>
  <option value="3" name="streamable">Streamable</option>
</select>
<!-- 直接判断选中值是否为3 -->
<input v-if="selectedOption === '3'" type="text" placeholder="输入流媒体相关内容..." />

然后在你的Vue实例里添加对应的响应式数据：

new Vue({
  el: '#your-app-container', // 替换成你的Vue挂载元素ID
  data() {
    return {
      selectedOption: '1', // 默认选中第一个选项
    }
  }
})

方案2：用change事件方法处理 #

如果需要在选中时做更多逻辑，可以用方法来处理：

<select asp-for="UploadOption" name="UploadOption" v-model="selectedOption" @change="toggleStreamableInput">
  <!-- 选项不变 -->
</select>
<input v-if="streamable" type="text" placeholder="输入流媒体相关内容..." />

Vue实例代码：

new Vue({
  el: '#your-app-container',
  data() {
    return {
      selectedOption: '1',
      streamable: false
    }
  },
  methods: {
    toggleStreamableInput() {
      // 当选中值为3时显示文本框，否则隐藏
      this.streamable = this.selectedOption === '3';
    }
  }
})

为啥原来的代码不行？ #

浏览器里<option>元素不会触发change事件，只有<select>在选中项变化时才会触发这个事件。而且用Vue的v-model绑定选中值是更符合响应式思想的做法，比直接操作事件对象要可靠得多~

内容的提问来源于stack exchange，提问作者kubawich