Question

我基于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的选项，则该方法将调用{{1} }设为1。

selectedgroup

Answer 1

您需要像这样从@change调用中删除（）：

@change="searchSubGroup"

如果保留（）设置，则在构建组件时仍将调用该函数，并且仍未定义“ selectedgroup”，因此将调用null

v模型基于@change起作用，因此该事件被触发两次。在更新v模型数据的change方法之前，selectedGroup方法被调用。这就是为什么值是“旧值”的原因。

尽管其他答案仍然是避免该问题的正确方法，但并不能确切解释为什么发生这种情况。

这里有另一个解决方案：

从b-form-select中删除您的@change呼叫
添加“监视的”属性

watch: { selectedgroup(value) { this.searchSubGroup(); //OR you could remove the method and just call axios here }) }

Answer 2

您应该调用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;
        }
    })
}

Answer 3

您可以使用@input代替@change事件，因为@input="searchSubGroup"返回当前选定的项目

new Vue({
  el: '#app',

  data() {
    return {
      selected: null,
      options: [{
          value: null,
          text: 'Please select some item'
        },
        {
          value: 'a',
          text: 'This is option a'
        },
        {
          value: 'b',
          text: 'Default Selected Option b'
        },
        {
          value: 'c',
          text: 'This is option c'
        },
        {
          value: 'd',
          text: 'This one is disabled',
          disabled: true
        },
        {
          value: 'e',
          text: 'This is option e'
        },
        {
          value: 'e',
          text: 'This is option f'
        }
      ]
    }
  },
  methods: {
    choose() {
      console.log(this.selected)
    }
  }

});

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
  <link rel="stylesheet" href="style.css">
  <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
  <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" />

  <!-- Add this after vue.js -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
  <script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  <script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

</head>

<body>

  <div id="app">

    <b-form-select v-model="selected" :options="options" class="mb-3" @input="choose">
    </b-form-select>
    <div>Selected: <strong>{{ selected }}</strong></div>
  </div>

  <script src="script.js"></script>
</body>

</html>

引导vue选择发送旧值

3 个答案: