Vue组件异常：下拉框变更触发按钮方法，按钮点击无响应

核心问题 #

按钮的点击事件绑定语法错误，导致方法触发逻辑完全错乱：

• 你用了:click（即v-bind:click）来绑定事件，这会让Vue立即执行loadRoute(selectedRoute)表达式，把执行结果（这里是Promise对象）绑定到按钮的click属性上，而非监听点击动作。
• 当下拉框切换时，selectedRoute是响应式变量，它的变化会触发绑定表达式的重新计算，所以每次切换选项都会自动调用loadRoute。
• 而按钮点击时，因为绑定的是一个已执行过的Promise，自然不会有任何反应。

修复方法 #

把按钮的:click改成@click（v-on:click的简写），这才是Vue监听DOM事件的正确语法：

<button @click="loadRoute(selectedRoute)">Load Route</button>

修复后逻辑说明 #

• @click="loadRoute(selectedRoute)"会在按钮被点击时，才调用loadRoute并传入当前选中的selectedRoute值。
• 下拉框切换时，只会更新selectedRoute的值，不会触发loadRoute，完全符合你原本的需求。

完整修复后的模板代码 #

<template>
    <h1>Planned Routes</h1>
    <select v-model="selectedRoute">
        <option
                v-for="identifiers in routeIdentifiers"
                v-text="identifiers.routeName"
                :key="identifiers.id"
                :value="identifiers.id"
        >
        </option>
    </select>
    <div v-text="loadedRouteName"></div>
    <button @click="loadRoute(selectedRoute)">Load Route</button>
</template>

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