質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

1回答

2540閲覧

vue.js buttonタグでソートさせたい

mojao_0227

総合スコア24

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2018/03/20 03:50

###解決したい事

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});

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

動作確認はしていませんが、下記のような感じでどうでしょうか。

<button @click="selectCategory = '1'">カテゴリ1</button>

ざっくり読んだだけなので、やりたいことが違っていたらすみません。

投稿2018/03/27 07:19

hashrock

総合スコア68

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問