vue.js選択された項目の選択/ドロップダウン表示Vmバインディングが機能しない（ブートストラップビュー）

Question

選択項目を選択/ドロップダウンからVMのプロパティにバインドする簡単なvueを作成しようとしています。私は、ビューモデルにもあるオプションコレクションを使用するとき、これがどのようにダウンしているかの明確かつ単純な例を見つけることができませんでした。かかわらず、私は、VMのddTestSelectedOptionプロパティを変更するには、ドロップダウンで選択した値を取得することはできません試したものの

<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> 

。

Answer 1

b-dropdownbootstrap-vueは、v-modelをサポートしていません。 the documentation状態として：

ドロップダウンがドロップダウンメニュー形式で リンクとアクションのリストを表示するためのトグル、コンテキストオーバーレイされています。

つまり、b-dropdownは、基本的に、メニューや同様のオプションセットを表示するためのUIコンポーネントです。

希望するものはb-form-selectです。

つまり、値を設定するオプションにクリックハンドラを追加することができます。

​​

ここにはworking exampleがあります。