VueJS + jQuery: динамически создающий компонент в Vue.js

Я относительно новичок в Vue.js, пытаюсь создать компонент Vue на основе этого настраиваемого меню выбора и я хочу добавить значок ionicon к каждому элементу списка.

Обычно я могу создать значок в Vue.js с помощью следующей строки (с соответствующими импортированными значками):

<component class="icon" :is="name-of-icon"></component>

Однако настраиваемое меню выбора, которое я пытаюсь воспроизвести, скрывает элемент select по умолчанию и динамически добавляет свои собственные элементы с настраиваемым стилем CSS.

В результате следующее не является решением, поскольку требует от меня использования стиля select по умолчанию:

<option v-for="option in options" :value="option">
    <component class="icon" :is="icon"></component 
    <p>{{ option }}</p>
</option>

Вместо этого я попытался добавить значок с помощью jQuery, когда он стилизован. Помещаем jQuery из вышеупомянутого пера в метод style():

<template>
    <select>
        <option v-for="option in options" :value="option">
            {{ option }}
        </option>
    </select>
</template>
<script>
    import MdPersonIcon from 'vue-ionicons/dist/md-person.vue'

    export default {
        name: 'custom-select',
        components: {MdPersonIcon},
        methods: {
            style() {
                $('select').each(function () {

                    // rest of code from pen here

                    for (let i = 0; i < numberOfOptions; i++) {
                        let option = $('<li />', {
                            rel: $this.children('option').eq(i).val()
                        });
                        let text = $this.children('option').eq(i).text();
                        let $icon = $('<component>', {
                            'class': 'icon',
                            ':is': 'md-person-icon',
                        });
                        let $label = $('<p>', {
                            text: text
                        });

                        $icon.appendTo(option);
                        $label.appendTo(option);
                        option.appendTo($list);
                    }

                    // rest of code from pen here
                });
            }
        },
        mounted() {
            this.style();
        }
    }
</script>
<style>
    /* rest of CSS from the pen here */
    .icon {
        padding: 8px 8px 8px 0;
        margin: 0;
    }
</style>

И использование компонента (где options - массив String):

<custom-select :options="options"></custom-select>

При обычном создании значка с последующим его осмотром получается что-то вроде:

<div class="ion profile-icon" data-title="Md Person Icon" data-name="md-person-icon" data-v-fc38bec4="">
    <svg viewBox="0 0 512 512" class="ion__svg">
        <path d="some long string"></path>
    </svg>
</div>

Компонент был заменен на ионикон. Однако проверка элемента показывает, что компонент не был заменен:

<component class="icon" :is="md-person-icon"></component>

Я не совсем понимаю, почему это происходит.

Я знаю, что мне не следует пытаться смешивать jQuery и Vue, но в настоящее время я не могу придумать другого способа создания настраиваемого компонента Vue меню выбора.


javascript vue.js jquery vuejs3
person Inkblot    schedule 03.10.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вам нужно передать элементы, созданные jQuery, в Vue, потому что то, что jQuery добавляет во время выполнения, не будет связываться и не обнаруживается Vue, вот образец, который я вижу, как ваш код jquery выполняет

<template>
  <ul>
    <li for="option in options" :key="option.rel" :rel="option.rel">
      <component class="icon" :is="option.icon" />
      <p>{{ option.text }}</p>
    </li>
  </ul>
</template>
<script>
 export default {
   data(){
    return {
      options:[
         {rel:'hide', text:'-- Month --', icon: 'md-person-icon'},
         {rel:'january', text:'january', icon: 'md-person-icon'},
         {rel:'february', text:'february', icon: 'md-person-icon'},
         ...
      ],
    }
  }
}
</script>
person Mohsen    schedule 03.10.2020
comment
Спасибо за ответ, не могли бы вы привести пример с использованием тега select? И с этим решением мне не нужно включать добавленное решение jQuery? - person Inkblot; 03.10.2020
comment
Коды, которые я написал в теге шаблона, - это то, что ваш код jQuery добавляет на страницу, поэтому не нужно, какие коды вы добавили в метод стиля, то, что я видел в вашем Codepan, - это установить display : none для тегов select и вместо этого использовать ul li. вы не можете добавить значок для выбора элемента, проверьте свой код, чтобы увидеть, что выбор скрыт - person Mohsen; 03.10.2020
comment
Если я правильно понимаю, я могу просто пропустить создание элемента select и просто отобразить то, что я хочу показать? - person Inkblot; 03.10.2020
comment
Точно! Из того, что я вижу, тег select является источником для построителя элементов jQuery, в то время как мы используем свойство data для этой цели в vue, которое больше не понадобится - person Mohsen; 03.10.2020