Question

我正在尝试使用vue2 / php / mysql在我制作的网站上实现font-awesome-picker，但是在标准js脚本内，因此没有导入，.vue等。我尝试添加的脚本来自此处：https://github.com/laistomazz/font-awesome-picker 我面临的问题是，我有3列标题，旁边有一个图标选择器，这将允许用户为每个标题选择1个图标。效果不错...但是，如果在2个不同的列中使用了相同的图标，则只要用户再次单击2个图标中的任何一个，选择器的两个实例都将触发，从而显示2个弹出窗口。我需要以某种方式使它们独特。

我尝试使用：key =“ list.id” 要么 v-for =“图标中的图标”：icon：icon：key =“ icon” 但没有任何效果。我不得不以某种方式将所有实例分开（我认为），因此它们是唯一的。这是模板代码：

Vue.component('font-awesome-picker', {
template: ' <div><div class="iconPicker__header"><input type="text" class="form-control" :placeholder="searchPlaceholder" @keyup="filterIcons($event)"  @blur="resetNew" @keydown.esc="resetNew"></div><div class="iconPicker__body"><div class="iconPicker__icons"><a  href="#" @click.stop.prevent="getIcon(icon)" :class="`item ${selected === icon ? \'selected\' : \'\'}`" v-for="icon in icons" :key="icon"><i :class="\'fa \'+icon"></i></a></div></div></div>',
name: 'fontAwesomePicker',
props: ['seachbox','parentdata'],
data () {
    return {
        selected: '',
        icons,
    listobj: {
      type: Object
    }
    };
},
computed: {
    searchPlaceholder () {
        return this.seachbox || 'search box';
    },
},
methods: {
  resetNew () {
      vm.addNewTo = null;
  },
    getIcon (icon) {
        this.selected = icon;
        this.getContent(this.selected);
    },
    getContent (icon) {
        const iconContent = window
            .getComputedStyle(document.querySelector(`.fa.${icon}`), ':before')
            .getPropertyValue('content');
        this.convert(iconContent);
    },
    convert (value) {
        const newValue = value
            .charCodeAt(1)
            .toString(10)
            .replace(/\D/g, '');

        let hexValue = Number(newValue).toString(16);

        while (hexValue.length < 4) {
            hexValue = `0${hexValue}`;
        }

        this.selecticon(hexValue.toUpperCase());
    },
    selecticon (value) {
        this.listobj = this.$props.parentdata;
        const result = {
            className: this.selected,
            cssValue: value,
            listobj: this.listobj
        };
        this.$emit('selecticon', result);
    },
    filterIcons (event) {
        const search = event.target.value.trim();
        let filter = [];

        if (search.length > 3) {
            filter = icons.filter((item) => {
                const regex = new RegExp(search, 'gi');
                return item.match(regex);
            });
        }else{
            this.icons = icons;
        }

        if (filter.length > 0) {
            this.icons = filter;
        }
    }
},
});

我在这里设置了一个小问题： https://jsfiddle.net/3yxk1ahb/1/ 在两种情况下，只需选择相同的图标，然后再次单击任何一个图标即可。您会看到两列的弹出窗口都打开了。

我该如何分离选择器？

Answer 1

问题出在您的@click和v-show

您应该使用list.id而不是list.icon（即@click="addNewTo = list.id"）

工作小提琴https://jsfiddle.net/q513mhwt/

Vue模板在使用时会触发多次，我认为我需要在某个地方使用唯一键

1 个答案: