Vue.jsにて以下のようなコードを記述しました。
DBから取得したデータにしたいして、input要素に入力した文字列で検索し、それらをセレクトボックスで選択させるとというものです。
検索して選択。もう一度、検索すると検索した値がクリアになります。
これはv-modelを使用しているからなのかなとも思いますが、選択したものに関しては一時的に保存できないものでしょうか。
また、出来ればその選択された値を入力のinputに表示出来ればと思っています。
良いアイディア、お持ちの方いらっしゃいましたらよろしくお願い致します。
<template> <label for="shopLabel">店一覧</label> <input type="text" id="shopLabel" v-model="searchingText"> <select multiple v-model="selectedItem"> <option v-for="val in filteredShopList" :value="val.id">{{ val.id }}:{{ val.name }}</option> </select> </template> <script> export default{ data: () => { return{ searchingText: '', selectedItem: [], } } props:['shop_list'], computed: { filteredShopList: function() { var filteredData = []; for(var i in this.shop_list) { var tmpList = this.shop_list[i]; if(tmpList.site_name.indexOf(this.searchingText) !== -1) { filteredData.push(tmpList); } } return filteredData; } </script>
あなたの回答
tips
プレビュー