Vue.js. v-on:change를 사용하여 b-form-select의 선택된 항목을 얻는 방법에는 아무런 도움이 되지 않는가?

Vue.js. v-on:change를 사용하여 b-form-select의 선택된 항목을 얻는 방법에는 아무런 도움이 되지 않는가?

나는 단지 선택한 아이템을 받고 싶다.<b-form-select>나는 API 호출에 사용하고 싶다.v-on:change는 아무 것도 하지 않는 것처럼 보이지만, 여기서 해결책은 다음과 같다: https://stackoverflow.com/a/31273611/8743351

사용할 때console.log(this.selected);나는 선택된 값을 기대하지만, 그 대신 나는 정의되지 않는다.

이 문제를 해결하는 방법은 매우 다양하지만 나에게는 아무런 효과가 없었다.

<!-- Export -->
<b-navbar toggleable type="light" variant="light">
  <b-nav is-nav-bar>
    <b-nav-item>
      <b-form-select v-model="selected" v-on:change="getSelectedItem" style="width:auto">
        <template slot="first">
              <option :value="null" disabled>-- Select project --</option>
            </template>
        <option v-for="project in projects" v-bind:value="project.value">
          {{ project.id }} {{ project.title }}
        </option>
      </b-form-select>
    </b-nav-item>
  </b-nav>

  <b-nav is-nav-bar>
    <b-nav-item>
      <b-button v-on:click="exportXML();">Export as XML</b-button>
    </b-nav-item>
  </b-nav>
</b-navbar>

methods: {
  getSelectedItem: function() {
    console.log(this.selected);
  },
  exportXML: function() {
    console.log(this.selected);
    this.$http.get(
      'http://localhost:8080/api/exports/' + this.selected,
    });
}
}

이벤트 인수에만 관심이 있는 경우:

.html 단위

<b-form-select 
    v-model="someobject.state"   <!--This is only used to bind the UI to data for display. In this case the state of the object. It can be anything in the VUE app's context, aka data:{}-->
    v-on:change="getSelectedItem" <!--will call the func getSelectedItem with 1 argument, the value of the newly selected item.-->
/>

.js:

....
methods: {
      getSelectedItem: function(myarg) { // Just a regular js function that takes 1 arg
        console.log(myarg);
      },
....

이벤트 인수를 포함하여 여러 인수를 전달하려는 경우:

.html 단위

<b-form-select 
    v-model="someobject.state"  <!--This is only used to bind the UI to data for display. In this case the state of the object. It can be anything in the VUE app's context, aka data:{}-->
    v-on:change="getSelectedItem($event, someobject.id)" <!--will call the func getSelectedItem with 2 arguments, the value of the newly selected item, and the id of a previously defined object.-->
/>

.js:

....
methods: {
      getSelectedItem: function(newObjectState, objectId) { // Just a regular js function that takes 2 args
        console.log(newObjectState + " --- " + objectId);
        updateObjectState(objectId, newObjectState)

      },
....

만약 누군가가 이것을 우연히 발견한다면, 나는 v-on:change가 업데이트되기 너무 이른 시기에 그 가치를 가로채고 있다는 것이 문제라고 믿는다.그래서 결과는 정의되지 않았다.다른 옵션을 클릭하려면 이전 클릭의 이전 값이 표시되도록 해야 한다.

나도 비슷한 문제를 풀었을 뿐이야.나는 온 체인지 방법을 실행하기 위해 기다리는 디바운스의 사용을 포함했다.

그것이 여기에서 구현되는 것이다. https://www.reddit.com/r/vuejs/comments/5xb9tj/input_call_a_method_but_with_debounce/

또한 loadash를 설치하고 "import _ from 'lodash'"를 그 부분에 포함시켜야 할 것이다.

늦었지만, 기능을 약간 그렇게 수정해서 작동하고, 나머지는 똑같다.

methods: {
  getSelectedItem: function(selected) {
    console.log(selected);
  },
  exportXML: function(selected) {
    console.log(selected);
    this.$http.get(
      'http://localhost:8080/api/exports/' + selected,
    });
  }
}

모델에서 값을 가져오는 것이 아니라 선택한 항목이 함수에 전달된다는 점에 유의하십시오.

이게 잘 될 거야. 나머지 구성 요소 스크립트를 게시할 수 있어?–고맙다

사실 이게 내가 가진 전부고 이 선택서와 관련이 있는 거야.

  export default {
    userMe: [],
    data() {
      return {
        selected: null,
        options: [],
      }
    },
    created: function() {

    },
    methods: {
      getSelectedItem: function() {
        console.log(this.selected);
      },
      exportXML: function() {
        console.log(this.selected);
        this.$http.get(
          'http://localhost:8080/api/exports/' + this.selected, )
      });
  }
}

참조URL: https://stackoverflow.com/questions/46789710/how-to-get-selected-item-of-b-form-select-with-vue-js-v-onchange-does-nothing