2017-07-03 30 views
2

VueJSの新機能です。 こんにちは私のアプリは動作していますが、jQueryをブロックする私のコンソールにこのエラーが表示されています。Vue警告]:ディレクティブの解決に失敗しました:bin

v-for = "メッセージ内のメッセージ"オブジェクトをループしてオブジェクトを表示しようとしています。しかし、このエラーを取得することはVueが]に警告:ディレクティブを解決するために失敗しました:ビン

<li v-for="message in messages" class="conversation-item"> 
<div class="" v-bind:class="message.direction" id="direction" title="other"> 
    <div class="conversation-avatar"> 
     <img class="rounded" 
      width="36" height="36" 
      src="assets/images/messenger-img.jpg" 
      alt=""> 
     </div> 
    <div v-if="message.contentType == 'file'" class="conversation-messages"> 
     <div class="conversation-message"> 
      <a class="file-link" :href="message.content" :title="message.fileName" :download="message.fileName"> 
       <div v-if="message.fileType == 'fileType'" class="message file-thumbnail" v-bind:style='{ backgroundImage: "url(" + message.content + ")", }'> 
       </div> 
       <div v-else class="message.file-thumbnail" v-bind:style='{ backgroundImage: "url(" + message | filterFile + ")", }'> 
       </div> 
       <div class="file-info"> 
        <span class="file-name">@{{ message.fileName }}</span> 
       </div> 
      </a> 
      </div> 
     <div class="conversation-timestamp">@{{ message.sentAt }} 
     </div> 
    </div> 
    <div v-else class="conversation-messages"> 
     <div class="conversation-message"> 
      <a target="_blank" class="other_chat"></a><span> 
       @{{ message.content }} 
      </span></div> 
     <div class="conversation-timestamp">@{{ message.sentAt }} 
     </div> 
    </div> 
</div> 
</li> 

は、実際に、これは私が追加した後、同じエラーが発生しました@記号

screeshot of console

+3

エラーメッセージから、私はあなたのコードのどこかに、 'v-bind'の代わりに' v-bin'ディレクティブを追加したタイプミスがあると仮定しています。 – thanksd

+0

コードベースでv-binを検索し、見つけたものを共有します。 – Charith

答えて

0

について心配しないでlaravelブレードでありますv-bindディレクティブ。 HTはコメントの下でコメントに、そして確かに、私はタイプミスをしていました。v-bind私はv-binを持っていました。

将来的に、「ディレクティブの解決に失敗しました:X」というメッセージが表示された場合は、ソースでv-Xという文字列を探します。

関連する問題