###解決したい事
vue.jsのselectboxでソートを行っています。
selectboxをbuttonタグに置き換えてソートしたいのですが、v-modelが使えず、
根本的な解決方法がわからず困っております。
お分かりの方いらっしゃいましたら、ご教示頂けますと幸いです。
よろしくお願い致します。
html
1<div class="question_wrapper"> 2 <div class="question_sortArea"> 3 //このセレクトボックスをbuttonに置き換えたいです。 4 <label> 5 <select v-model="selectCategory" multiple="multiple" options="items"> 6 <option v-for="(value, key, index) in categories" v-bind:value="key">{{ value }}</option> 7 </select> 8 </label> 9 </div> 10 <div class="question_list_wrapper" v-for="task in filteredAnswer"> 11 <div class="question_list"> 12 <div class="question_name" v-on:click="toggleList(task)">{{ task.faq_name }}</div> 13 <transition name="fade"> 14 <div class="question_list_container" v-show="task.show"> 15 <p>{{ task.answer }}</p> 16 </div> 17 </transition> 18 </div> 19 </div> 20 </div> 21</div>
javascript
1var shop = new Vue({ 2 el: '#shop_info', 3 data: function () { 4 var columns = { 5 area: 'area', 6 question_name: 'question_name', 7 question_title: 'question_title', 8 question_telephone: 'question_telephone', 9 question_time: 'question_time', 10 }; 11 var sortOrders = {}; 12 Object.keys(columns).forEach(function (key) { 13 sortOrders[key] = 1 14 }); 15 var selectCategory = {}; 16 17 return { 18 columns: columns, 19 tasks: [ 20 { 21 "category": 1, 22 "question_name": "question1", 23 "question_title": "question_title1", 24 "question_telephone": "000001", 25 "question_time": "11:00", 26 }, 27 { 28 "category": 2, 29 "question_name": "question2", 30 "question_title": "question_title2", 31 "question_telephone": "000002", 32 "question_time": "11:00", 33 }, 34 { 35 "category": 3, 36 "question_name": "question3", 37 "question_title": "question_title3", 38 "question_telephone": "000002", 39 "question_time": "11:00", 40 } 41 ], 42 sortKey: '', 43 sortOrders: sortOrders, 44 selectCategory: '', 45 show: false, 46 categories: { 47 0:'all', 48 1:'カテゴリ1', 49 2:'カテゴリ2', 50 3:'カテゴリ3' 51 }, 52 } 53 }, 54 methods: { 55 sortBy: function(key) { 56 this.sortKey = key; 57 this.sortOrders[key] = this.sortOrders[key] * -1; 58 }, 59 toggleList: function () { 60 this.show = !this.show; 61 } 62 }, 63 computed: { 64 filteredTasks: function () { 65 var data = this.tasks; 66 67 var filterWord = this.searchWord && this.searchWord.toLowerCase(); 68 var filterCategory = this.selectCategory && Number(this.selectCategory); 69 70 if(filterWord || this.selectCategory) { 71 data = data.filter(function (row) { 72 73 if (filterCategory) { 74 if (row['category'] !== filterCategory) { 75 return false; 76 } 77 } 78 return row; 79 }) 80 } 81 return data; 82 } 83 } 84});
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。