如何在循环内的v-select搜索事件中传递index参数？

要在v-select的search事件中同时传递循环的index和原事件的参数，有两种简单的实现方式：

方式一：使用箭头函数包裹调用 #

直接在事件绑定里用箭头函数，把index作为额外参数传给fetchAffected，同时保留原事件的searchTerm和loading参数：

修改后的模板代码：

<div class="row w-100 form-group" v-for="(item, index) in affectedParties" :key="index">
    ...
    <div class="col-md-6">
        <v-select 
            label="text" 
            :filterable="false" 
            :options="item.affecteds" 
            @search="(searchTerm, loading) => fetchAffected(searchTerm, loading, index)" 
            v-model="item.selectedAffected" 
            placeholder="Selected"
        ></v-select>
    </div>
</div>

对应的fetchAffected函数写法：

fetchAffected(searchTerm, loading, index) {
    // 通过index获取当前循环项
    const currentParty = this.affectedParties[index];
    
    // 标记加载状态
    loading(true);
    
    // 执行AJAX请求，替换成你的实际接口地址
    axios.get(`/your-api-url?keyword=${searchTerm}`)
        .then(response => {
            // 将返回的选项赋值给当前项的affecteds
            currentParty.affecteds = response.data;
        })
        .catch(error => {
            // 处理请求错误
            console.error('获取选项失败:', error);
        })
        .finally(() => {
            // 结束加载状态
            loading(false);
        });
}

方式二：使用bind绑定参数 #

用bind把index绑定到函数上，注意此时函数的参数顺序会变成index在前，原事件参数在后：

模板代码修改：

<div class="row w-100 form-group" v-for="(item, index) in affectedParties" :key="index">
    ...
    <div class="col-md-6">
        <v-select 
            label="text" 
            :filterable="false" 
            :options="item.affecteds" 
            @search="fetchAffected.bind(null, index)" 
            v-model="item.selectedAffected" 
            placeholder="Selected"
        ></v-select>
    </div>
</div>

对应的函数写法：

fetchAffected(index, searchTerm, loading) {
    // 和方式一的逻辑一致，只是参数顺序调换了
    const currentParty = this.affectedParties[index];
    
    loading(true);
    
    axios.get(`/your-api-url?keyword=${searchTerm}`)
        .then(response => {
            currentParty.affecteds = response.data;
        })
        .catch(error => {
            console.error('获取选项失败:', error);
        })
        .finally(() => {
            loading(false);
        });
}

注意点 #

• 给v-for加上:key="index"（如果没有唯一ID的话用index），这是Vue的要求，能提升列表渲染性能。
• 确保loading参数正确调用，它是v-select提供的函数，用来控制加载状态显示。

内容的提问来源于stack exchange，提问作者Salvador Ruiz Guevara