CODEWITHSUNDEEP
vue.js
ractoon
ractoon

Reputation: 3

vue.js Bootstrap Modal Data Bind Fails

I'm having some issues with binding data within a Bootstrap modal element. If I move everything in the modal-body class outside the modal container it works fine, however, vue.js doesn't pick up the bindings within the modal.

Not sure if this has something to do with the modal styles (display: none; before it's opened) or conflicting scripts. The modal code looks like: 

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">

        <div v-if="loading" class="text-center">

          <img src="loading.gif" alt="Loading">

        </div>
        <div v-else>

          <div v-if="plugins.length > 0" class="list-group">
            <a href="#" class="list-group-item" v-for="(index, plugin) in wpplugins">
              <h5 class="list-group-item-heading"><strong>{{ plugin.name }}</strong> by {{ plugin.author }}</h5>
              <p class="list-group-item-text"><small>{{ plugin.desc }}</small></p>
            </a>
          </div>

        </div>

      </div><!-- /.modal-body -->
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

This ends up just outputting the image and the syntax:

How it appears in the modal when open

Upvotes: 0

Views: 1073

Answers (1)

Jeff
Jeff

Reputation: 25221

Make sure your modal code is within the element that Vue is bound to

Upvotes: 1

Related Questions