Vue-multiselect打开和关闭,添加类

时间:2018-06-25 16:22:32

标签: vue.js

当下拉列表打开或选择具有值时,我需要添加类。但是,如果select没有值,我需要删除该类。

当我尝试这样做时,我遇到了问题。当选择值时多选关闭时,它不检查该值,并且代码不起作用。

<template>
  <div class="mselect" :class="{ 'mselect_active': opened }">
    <span class="mselect__label">{{ label }}</span> 
    <multiselect @open="openSelect" @close="closeSelect" @input="updateSelect" :showLabels="false" :show-labels="false" :multiple="true" placeholder="Pick a value" v-model="selected" :options="options"></multiselect>
  </div>
</template>  


<script>
  import Multiselect from 'vue-multiselect'
  export default {
    components: { Multiselect },
    name: "fb-select",
    data () {
      return {
        selected: null,
        value: null,
        opened: false,
        options: ['test long option value 123 ', 'test long option value 1111', 'test long option value 555','test long option', 'test long option value','test long  value', 'test long option value 3','test long option value 2', 'test long option value 1',' long option value', 'test long option 132 1 3 value']
      }
    },
    props: {
      label: {
          type: String,
          default: ''
      }
    },
    
    methods: {
      openSelect(value) {
        this.opened = true
      },
      closeSelect(value) {
        console.log(value); 
        if(value.length == 0) {
          this.opened = false
        }
      },
      updateSelect(value) {
        if(value.length != 0) {
          this.opened = true
        } else {
          this.opened = false
        }
      }
    },
  }
</script>

<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>

0 个答案:

没有答案