如何在Vue.js中利用select标签的name或id属性值对应data属性实现路由跳转

这问题我太懂了！你想要的就是通过select的name属性直接对应data里的数组，复用同一个跳转方法对吧？其实只需要利用JavaScript的动态对象属性访问特性就能轻松实现，不用写多个分支判断。

核心原理 #

Vue实例会把你data里定义的属性都挂载到this对象上，所以当你拿到select的name值后，直接用this[name]就能访问到data中对应的数组（比如name="participants"时，this["participants"]就等价于this.participants）。

优化后的changeRoute方法 #

直接替换你原来的方法就行，注释里写清楚了每一步的作用：

methods:{
  changeRoute($event){
    // 获取触发事件的select元素
    const selectElement = $event.target;
    // 拿到select的name属性值，对应data里的数组名
    const dataKey = selectElement.name;
    // 把选中的value转成数字（因为select的value默认是字符串，而你的数组索引是数字）
    const selectedIndex = parseInt(selectElement.value);

    // 动态获取data中对应的选项数组
    const optionsArray = this[dataKey];
    // 保险起见，如果找不到对应的数组就直接返回，避免报错
    if (!optionsArray) return;

    // 获取选中的选项对象
    const selectedOption = optionsArray[selectedIndex];
    // 只有当存在有效跳转链接时才执行跳转
    if (selectedOption.linkText) {
      // 如果你的项目用了Vue Router，就用这个跳转
      this.$router.push(selectedOption.linkText);
      // 如果是普通的页面跳转，就用下面这句（注释掉上面的，打开这个）
      // window.location.href = selectedOption.linkText;
    }
  }
}

为什么比你的原方法更好？ #

• 不用额外通过document.getElementById获取value，直接从事件对象里拿，更简洁高效
• 动态属性访问完全适配你所有的select下拉框，不管是participants还是positions，甚至以后加新的下拉框，只要name和data里的数组名对应，就能直接复用这个方法
• 加了容错判断，避免因为name不匹配或者选中默认选项时出现错误

你的select标签完全不用改，保持原样就能正常工作啦！

内容的提问来源于stack exchange，提问作者Abdul Raheem Ghani