選択したドロップダウンから値を取得するVue Js

Question

私は問題があります。フォームバインディングvue jsから値を取得する方法について本当に混乱しました。私は試しました - >https://vuejs.org/v2/guide/forms.html#Select。しかし、私はいつもエラーが出ます - >"selected"というプロパティまたはメソッドはインスタンス上で定義されていませんが、レンダリング時に参照されます。データオプションで無効なデータプロパティを宣言してください。私のコードで何が問題になっていますか？ここで

は私のコードです：ここでは

data: function() { 
    return { 
    data: { 
     options: {}, 
     selected: '' 
    } 
    }; 
}, 
methods: { 
    Search: function() { 
    var vm = this; 

    var types = [ 
     { 
     "id": "id", 
     "value": "ID" 
     }, 
     { 
     "id": "title", 
     "value": "Title" 
     }, 
     { 
     "id": "category", 
     "value": "Category" 
     }, 
     { 
     "id": "username", 
     "value": "Nama User" 
     } 
    ]; 

    vm.data.options = types; 

    console.log(vm.data.selected); 
    } 
} 

は私のhtmlコードです：

<select v-model="selected" class="form-control sl"> 
    <option v-for="option in data.options" v-bind:value="option.id"> 
     {{ option.value }} 
    </option> 
</select> 

Answer 1

あなたの投稿を間違えて読んでいるので、データ部分を無視してください。データ内にデータオブジェクトを作成したことを認識していませんでした。以下は、あなたのものと密接に適合するコードのサンプルです。ここで問題となるのは、ボタンをクリックすると、新しい要素が検索ドロップダウンに追加されますが、実際にはまだ何も選択されていないため、コンソールの出力は空の文字列になります。何かを選択してもう一度ボタンをクリックすると、価値が得られます。

Vue.component('select-component', { 
 
\t template: '<div>\ 
 
    <select v-model="data.selected" class="form-control sl">\ 
 
    <option v-for="option in data.options" v-bind:value="option.id">\ 
 
     {{ option.value }}\ 
 
    </option>\ 
 
    </select>\ 
 
    <button v-on:click="Search">Populate List</button>\ 
 
</div>', 
 
    data: function() { 
 
    return { 
 
     data: { 
 
     options: {}, 
 
     selected: '' 
 
     } 
 
    }; 
 
    }, 
 
    methods: { 
 
    Search: function() { 
 
     var vm = this; 
 

 
     var types = [ 
 
     { 
 
      "id": "id", 
 
      "value": "ID" 
 
     }, 
 
     { 
 
      "id": "title", 
 
      "value": "Title" 
 
     }, 
 
     { 
 
      "id": "category", 
 
      "value": "Category" 
 
     }, 
 
     { 
 
      "id": "username", 
 
      "value": "Nama User" 
 
     } 
 
     ]; 
 

 
     vm.data.options = types; 
 
\t \t \t 
 
     console.log(vm.data.selected); 
 
    } 
 
    } 
 
}); 
 

 
var vm = new Vue({ 
 
\t el: '#app' 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script> 
 
<div id="app"> 
 
    <select-component></select-component> 
 
</div>

ただ、ノート、あなたの選択した変数は、あなたがこのスコープで利用できるようにしている唯一の変数であるデータオブジェクトのプロパティであるとして、私はまた、v-model="data.selected"にv-model="selected"を変更しました。

Answer 2

methodsは、この方法を使用しないで、あなたは実際には必要ありません。どんな方法でもvalueを得ることができます。ここでは作業例です：kevlai22 @

const app = new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    selectedOption: undefined, 
 
    chosenColor: 'transparent', 
 
    colorMappings: { 
 
     ID: 'red', 
 
     Title: 'green', 
 
     Category: 'blue', 
 
     'Nama User': 'orange' 
 
    }, 
 
    widthMappings: { 
 
     ID: '2px', 
 
     Title: '4px', 
 
     Category: '6px', 
 
     'Nama User': '8px' 
 
    }, 
 
    types: [ 
 
     { 
 
     "id": "id", 
 
     "value": "ID" 
 
     }, 
 
     { 
 
     "id": "title", 
 
     "value": "Title" 
 
     }, 
 
     { 
 
     "id": "category", 
 
     "value": "Category" 
 
     }, 
 
     { 
 
     "id": "username", 
 
     "value": "Nama User" 
 
     } 
 
    ] 
 
    }, 
 
    watch: { 
 
    selectedOption(newVal) { 
 
     this.chosenColor = this.colorMappings[newVal] 
 
    } 
 
    }, 
 
    computed: { 
 
    chosenWidth() { 
 
     return this.widthMappings[this.selectedOption] || '1px' 
 
    } 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script> 
 
<div id="app"> 
 
    <select v-model="selectedOption"> 
 
    <option disabled value="">Please select one</option> 
 
    <option v-for="type in types" v-bind:value="type.value">{{type.value}}</option> 
 
    </select> 
 
    <span v-bind:style="{ 'background-color': chosenColor, 'border': 'solid ' + chosenWidth + ' black' }">Selected: {{ selectedOption }}</span> 
 
</div>

Answer 3

はすでにあなたに実行可能なコードスニペットを与えた、私はあなたが警告メッセージプロパティまたはメソッドを得た理由を「選択」あなたに伝えたいと思いますされていませんインスタンスで定義されているが、レンダリング中に参照されます。データオプションで無効なデータプロパティを宣言してください。。
ネストしたデータオブジェクトでデータオブジェクトを返すだけなので、v-model="selected"は機能しませんが、v-model="data.selected"となります。実際には、ネストされたオブジェクトを返す必要はありませんが、このようなコードを使用するだけです。

data: function() { 
    return { 
     options: [], 
     selected: '' 
    }; 
}, 

working demoを確認してください。