javascript - Bootstrap Vue选择发送旧值

我基于vue引导获得了以下选择代码:

<b-form-select v-model="selectedgroup" class="mb-3"  @change="searchSubGroup()">
    <option :value="null">Select a group</option>
    <option v-for="group in groupItem" :value="group.id">
        {{group.nome}}
    </option>
</b-form-select>

当@change事件调用searchSubGroup()方法时，@ change事件将传递旧值selectedgroup。示例:如果我首先单击值= 1的选项，则该方法将调用selectedgroup作为null，然后，如果我再次单击另一个值= 2的选项，该方法将调用selectedgroup作为1。

searchSubGroup(){
  this.axios.get("http://chart.solutions/public/api/produto/subgroup/search/" + this.selectedgroup + "/").then(response => {
        if (response.data.erro) {
            //console.log("subgroup doesnt exist")
        }else{
            this.subGroupItem = response.data;
        }
    })
}

最佳答案

您应该调用不带括号的searchSubGroup方法。这将自动将新选择的值传递给您的方法。

<b-form-select v-model="selectedgroup" class="mb-3"  @change="searchSubGroup">
    <option :value="null">Select a group</option>
    <option v-for="group in groupItem" :value="group.id">
        {{group.nome}}
    </option>
</b-form-select>

然后，在您的方法中，您应该执行以下操作:

searchSubGroup(value){
  this.axios.get("http://chart.solutions/public/api/produto/subgroup/search/" + value + "/").then(response => {
        if (response.data.erro) {
            //console.log("subgroup doesnt exist")
        }else{
            this.subGroupItem = response.data;
        }
    })
}