Bootstrap vue 选择发送旧值

Sku*_*ire 5 javascript vue.js vue-component vuejs2 bootstrap-vue

我得到了这个基于 vue bootstrap 的选择代码:

<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>  
Run Code Online (Sandbox Code Playgroud)

searchSubGroup()@change 事件调用该方法时,@change 事件会传递一个旧值selectedgroup。示例:如果我首先单击 value = 1 的选项,该方法将调用selectedgroupas null,然后如果我再次单击 value = 2 的另一个选项,该方法将调用selectedgroupas 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;
        }
    })
} 
Run Code Online (Sandbox Code Playgroud)

Hus*_*him 3

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>
Run Code Online (Sandbox Code Playgroud)

然后在你的方法中你应该执行以下操作..

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;
        }
    })
} 
Run Code Online (Sandbox Code Playgroud)

  • 这实际上是相同的答案,只是您没有解释它的工作原理。当您删除括号并捕获 VALUE 时,您将跳过这个问题,即 v-model 的 @change 调用是在 AFTER 之后进行的,因此在调用该方法时“this.selectedgroup”为 NULL。 (2认同)