VUEディレクティブで使用グローバル関数

Question

私はこのようなVUEディレクティブでlodash方法（_.isEmpty）を使用しようとしている：

<div class="post" v-for="post in posts"></div> 
    ... 
    <div class="comments" v-if="! _.isEmpty(post.comments)"> 
     <div class="comment" v-for="comment in post.comments"></div> 
    </div> 
    ... 
</div> 

が、次のエラーを取得：

Uncaught TypeError: Cannot read property 'isEmpty' of undefined

それはVUEらしいです現在のスコープ内で_.isEmptyメソッドを探しています。この場合、グローバル関数をどのように呼び出すべきですか？

Answer 1

あなたは、テンプレート内の現在のVueインスタンス/コンポーネントのアクセスのみ機能することができます：

• データ小道具
• 方法

いいえ "のサードパーティ" のコードができ

を走る

methods: { 
    isEmpty: function (arr) { return _.isEmpty(arr)} 
} 

を、代わりにテンプレートでこのメソッドを使用します：

だから、あなたはlodash方法にプロキシにVueのコンポーネントのメソッドを作成しなければならない理由だけで

<div class="comments" v-if="! isEmpty(post.comments)"> 

Answer 2

あなたのVueコンポーネントに_を追加してください：

data(){ 
    return { 
    _:require('lodash') //or however you include it. maybe just window._ 
    } 
} 

次にアクセス可能になります。 _が有効なオブジェクトキーである場合は肯定的ではないため、必要に応じてloまたはlodashと呼ぶこともできます。

また、コメントが配列であると仮定すると、v-if='post.comments.length'を使用しても問題はありません。あなたがすでにそれが配列であることが分かっているなら、Lo-dashは素晴らしいですが、不要です。