如何为v-model传递特定参数？如何在v-model中获取数组days的索引？

针对你的两个Vue问题，我来一步步帮你解决：

问题1：如何为v-model调用传递特定参数？ #

Vue的v-model是语法糖，本质上等价于:value="xxx"加上@input="xxx = $event.target.value"，所以它没法直接传递额外参数。但我们可以手动拆解这个语法糖，在事件处理函数里传递需要的参数，或者通过绑定特定值来间接实现。

问题2：如何在v-model中获取数组days的索引？ #

结合你的需求——选中选项时触发dayList(index)并输出索引，最直接的方案是把选项的value绑定为循环的index，让v-model直接关联索引值，再通过@change事件触发你的方法。

完整代码示例 #

<select v-model="selectedIndex" id="dayList" @change="dayList(selectedIndex)">
  <option v-for="(day, index) in days" :key="index" :value="index">
    {{ selectDaysLabel(day) }}
  </option>
</select>

export default {
  data() {
    return {
      selectedIndex: null, // 存储选中项的索引
      days: [] // 你的days数组数据
    };
  },
  methods: {
    dayList(index) {
      console.log(index); // 这里会输出选中项的索引0、1、2...
      // 如果需要获取对应的day对象，可以直接通过this.days[index]拿到
      const selectedDay = this.days[index];
    },
    selectDaysLabel(day) {
      // 你的标签格式化逻辑，比如返回day.name之类的
      return day;
    }
  }
};

另一种方案（手动实现v-model逻辑） #

如果你需要同时获取day对象和索引，也可以拆分v-model，在@change事件里传递索引：

<select :value="selectedDay" @change="handleSelection($event, index)" id="dayList">
  <option v-for="(day, index) in days" :key="index" :value="day">
    {{ selectDaysLabel(day) }}
  </option>
</select>

export default {
  data() {
    return {
      selectedDay: null,
      days: []
    };
  },
  methods: {
    handleSelection(event, index) {
      this.selectedDay = event.target.value;
      this.dayList(index); // 调用你的方法并传递索引
    },
    dayList(index) {
      console.log(index);
    },
    selectDaysLabel(day) {
      return day;
    }
  }
};

注意：如果day是对象类型，直接绑定:value="day"会被浏览器转成字符串[object Object]，这种情况更推荐第一种绑定索引的方案，操作起来更简单可靠。

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