Vue.js - 선택한 항목 VM 바인딩이 작동하지 않음(bootstrap-vue)을 선택/드롭다운합니다.

Vue.js - 선택한 항목 VM 바인딩이 작동하지 않음(bootstrap-vue)을 선택/드롭다운합니다.

선택한 항목을 선택/드롭다운에서 VM 속성에 바인딩하는 단순 vue를 생성하려고 합니다.

뷰 모델에도 있는 옵션 컬렉션을 사용할 때 어떻게 다운되는지 명확하고 간단한 예를 찾을 수 없었습니다.

<template>
    <div>
        <h1>Select box</h1>
        <b-dropdown id="ddCommodity"
                    name="ddCommodity"
                    v-model="ddTestVm.ddTestSelectedOption"
                    text="Select Item"
                    variant="primary"
                    class="m-md-2" v-on:change="changeItem">
            <b-dropdown-item disabled value="0">Select an Item</b-dropdown-item>
            <b-dropdown-item v-for="option in ddTestVm.options":selected="option.value == 'LME/ST_TNI_ALL'":value="option.value">{{option.text}}</b-dropdown-item>           
        </b-dropdown> <span>Selected: {{ ddTestVm.ddTestSelectedOption }}</span>
 </div>
</template>


<script>
    export default {
        components: {

        },
        data() {
            return {
                someOtherProperty: null,
                ddTestVm: {
                    originalValue: [],
                    ddTestSelectedOption: "Value1",
                    disabled: false,
                    readonly: false,
                    visible: true,
                    color: "",
                    options: [
                        {
                            "value": "Value1",
                            "text": "Value1Text"
                        },
                        {
                            "value": "Value2",
                            "text": "Value2Text"
                        },
                        {
                            "value": "Value3",
                            "text": "Value3Text"
                        }
                    ]
                }
            }
        },        
        methods: {
            changeItem: async function () {
            //grab some remote data
                try {
                    let response = await this.$http.get('https://www.example.com/api/' + this.ddTestVm.ddTestSelectedOption + '.json');
                    console.log(response.data);
                    this.someOtherProperty = response.data;
                } catch (error) {
                    console.log(error)
                }
            }
        },
        watch: {

        },
        async created() {

        }
    }
</script>

<style>
</style>

어떤 방법을 사용해도 드롭다운에서 선택한 값을 가져와 VM의 ddTestSelectedOption 속성을 변경할 수 없습니다.

이 문제에 대해 누가 도움을 줄 수 있나요?

감사해요.

b-dropdown에bootstrap-vue지원하지 않습니다.v-model문서에는 다음과 같이 기술되어 있습니다.

드롭다운은 링크 및 작업 목록을 드롭다운 메뉴 형식으로 표시하기 위한 전환 가능한 컨텍스트 오버레이입니다.

바꿔 말하면b-dropdown는 기본적으로 메뉴 또는 유사한 옵션 세트를 표시하기 위한 UI 컴포넌트입니다.

당신이 원하는 것은 입니다.

즉, 값을 설정하는 옵션에 클릭 핸들러를 추가할 수 있습니다.

  <b-dropdown-item v-for="option in ddTestVm.options" 
                    :key="option.value" 
                    :value="option.value"
                    @click="ddTestVm.ddTestSelectedOption = option.value">

여기 작업 예가 있습니다.

b-form-select가 필요한 게 있는데

<template>
  <div>
    <b-form-select v-model="selected" :options="options"></b-form-select>
    <b-form-select v-model="selected" :options="options" size="sm" class="mt-3"></b-form-select>

    <div class="mt-3">Selected: <strong>{{ selected }}</strong></div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: null,
        options: [
          { value: null, text: 'Please select an option' },
          { value: 'a', text: 'This is First option' },
          { value: 'b', text: 'Selected Option' },
          { value: { C: '3PO' }, text: 'This is an option with object value' },
          { value: 'd', text: 'This one is disabled', disabled: true }
        ]
      }
    }
  }
</script>

b-form-select만 선택한 값 동작을 수행할 수 있습니다.

선택되지 않은 값 미리 보기:

선택한 값 미리 보기:

샘플 코드:

<template>
  <div>
    <b-form-select v-model="selected" :options="options"></b-form-select>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selected: null,
        options: [
          { value: 1, text: 'Please select an option' },
          { value: 2, text: 'This is First option' },
          { value: 3, text: 'Selected Option' }
        ]
      }
    }
  }
</script>

언급URL : https://stackoverflow.com/questions/47124770/vue-js-select-dropdown-selected-item-vm-binding-is-not-working-bootstrap-vu