vue.js Bootstrap Modal Data Bind Fails

Question

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

is your modal within the element that your Vue app is bound to? — Jeff
– Jeff, Commented Mar 11, 2016 at 6:22
Either what Jeff asked, or I would guess that Bootstrap somehow duplicates or moves the modal body elements in a way that removes the Vue bindings. — Linus Borg
– Linus Borg, Commented Mar 11, 2016 at 12:44
I have use vue with external resources, including bootstrap, and I'd haven't any problem like that. If you still think that could be the bootstrap js library, try with vue-strap. Anyway what I see there, is that Vue isn't present in your app, because is ignoring the bindings, the v-if and everything related with Vue — Yerko Palma
– Yerko Palma, Commented Mar 11, 2016 at 13:30
@ractoon no problem, glad it worked! I put an answer so future viewers may be helped by the question. — Jeff
– Jeff, Commented Mar 11, 2016 at 16:56

Jeff · Accepted Answer · 2016-03-11 16:56:08Z

1

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

answered Mar 11, 2016 at 16:56

Jeff

25.3k4 gold badges73 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

vue.js Bootstrap Modal Data Bind Fails

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related