[Vue Warn]: Failed to Resolve Directive: Bin

I am new to VueJS. Hi although my app is working I am getting this error in my console which blocks the jQuery.

v-for="message in messages" looping throught the object and trying to show the object. but getting this error Vue warn]: Failed to resolve directive: bin

<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>

actually this is a laravel blade so dont worry about @ sign

2

2 Answers

I had the same error after adding a v-bind directive.Turns out, I had a typo, and instead of v-bind I had v-bin.

In the future, if I receive a "Failed to resolve directive: X" message, I will look in my source for string v-X.

3

If you stop the system once and restart it again, the problem will be solved. When using Vuetify, you must stop the system once after adding any component or property.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

David Miller

David Miller

Executive Financial & Market Analyst

David Miller brings 15 years of experience in global economics, personal finance strategy, and market dynamics. He specializes in turning complex economic trends into actionable insights for everyday readers.

Share this article
Twitter Facebook Pinterest