Q&A
ありがとうございました。解決しました！！
vue.jsの初心者です。下のようなコードを書いたのですが、
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link href="in.css" rel="stylesheet"> <title>Document</title> </head> <body> <div id="app"> <input v-model.number="budget">円以下に絞り込む <input v-model.number="limit">件を表示 <p>{{matched.length}}件中{{limited.length}}件を表示中</p> <ul> <li v-for="item in limited" v-bind:key="item.id"> {{item.name}} {{item.price}}円 </li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el: "#app", data: { order: false, budget: 300, limit:2, list:[ {id:1, name:'りんご', price:200}, {id:2, name:'バナナ', price:100}, {id:3, name:'イチゴ', price:300}] }, computed: { matched: function(){ return this.list.filter(function(e){ return e.price <= this.budget }, this) }, sorted: function(){ return _.orderBy(this.matched, 'price', this.order ? 'desc' : 'asc') }, limited: function(){ return this.sorted.slice(0, this.limit) } }
})
</script> </body> </html> このようなエラーがでできました。 ReferenceError: _ is not defined 調べても中々わからないので質問させていただきます。 どうすればこのエラーを解消できるか、ご教授お願いします。
回答2件
0
https://jp.vuejs.org/v2/guide/migration.html#%E3%83%95%E3%82%A3%E3%83%AB%E3%82%BF
算出プロパティへ、lodash の orderBy (もしくは sortBy)を使用します。
とあるように、lodashを使わないといけません。
<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
を追加するなどしてlodashを読み込みましょう。
投稿2019/05/14 07:06
総合スコア1292
0
ベストアンサー
return _.orderBy(this.matched, 'price', this.order ? 'desc' : 'asc')で_を使っていますが、この_が見つからない、ということではないかと思われます。
おそらくlodashだと思いますので、以下のCDN呼び出しを（vue.jsの読み込みの前後あたりに）追加してみてください。
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>
投稿2019/05/14 06:59
総合スコア145183
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。