使用Vue.js实现多选框组件

2023-05-17 11:46:49

使用Vue.js实现多选框组件


Vue.component('multi-select', {
  props: {
    options: {
      type: Array,
      required: true
    },
    value: {
      type: Array
    }
  },
  data() {
    return {
      selected: this.value || []
    }
  },
  methods: {
    select(option) {
      const index = this.selected.indexOf(option);
      if (index === -1) {
        this.selected.push(option);
      } else {
        this.selected.splice(index, 1);
      }
      this.$emit('input', this.selected);
    }
  },
  render() {
    const options = this.options.map(option => {
      return
  • this.select(option)}>{option} {this.selected.indexOf(option) !== -1 ? '✔' : ''}
  • }); return
      {options}
    } }); new Vue({ el: '#app', data() { return { selectedOptions: [] } } });
    • 作者:
    • 原文链接:
      更新时间:2023-05-17 11:46:49