Vue条件渲染

Question

我正在使用 Vuejs。我有一个带有多个选择和 select2 类的选择输入。

<select class="select 2" v-if="show" multiple><option>1</option></select>

最初显示的是

false

，这样元素就不会被渲染。 我只想获得这个选择元素的 select 2 属性，它实际上没有触发。

Answer 1

这是一个非常基本的解决方案，不包括值绑定。

对于完整的解决方案，请使用提供的 select2 包装器

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/[email protected]/dist/css/select2.min.css" />
<script src="https://unpkg.com/vue@2"></script>
<script src="https://unpkg.com/[email protected]/dist/jquery.js"></script>
<script src="https://unpkg.com/[email protected]/dist/js/select2.js"></script>