Vue模板在使用时会触发不止一次，我想我需要一个唯一的键

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/