[Vuejs]-Vue conditional rendering

by

0👍

Here is a very basic solution, which does not cover value binding.

For the complete solution use the provided select2 wrapper

var app = new Vue({
  el: '#app',
  data: {
    show: false,
    values: []
  },
  watch: {
    show(val) {
      if (val) {
        var vm = this;
        Vue.nextTick(function () {        
          $(".select2").select2();
        })        
      }
    }
  }
})
#app {
  line-height: 1.75;
}

[v-cloak] {
  display: none;
}
select {
  min-width: 300px;
}
<div id="app" v-cloak>
  Show: <label class="switch">
  <input type="checkbox" v-model="show">
  <span class="slider"></span>
  </label><br/>
  <div v-if="show">
    <select class="select2" v-model="values" multiple>
      <option>1</option>
      <option>2</option>
      <option>3</option>
    </select>
  </div>
</div>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/select2@4.0.3/dist/css/select2.min.css" />
<script src="https://unpkg.com/vue@2"></script>
<script src="https://unpkg.com/jquery@3.1.1/dist/jquery.js"></script>
<script src="https://unpkg.com/select2@4.0.3/dist/js/select2.js"></script>
👤Tolbxela

Leave a comment