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


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

03.10.2020 03:49:56 Просмотров 47 Источник

Я относительно новичок в этом деле. 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>

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

<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>

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

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

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

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

У вопроса есть решение - Посмотреть?

Ответы - VueJS + jQuery: динамическое создание компонента в Vue.js / VueJS + jQuery: dynamically creating component in Vue.js

Является ответом!
Mohsen

03.10.2020 04:33:44

Вы должны перенести элементы, созданные 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>
Помочь в развитии проекта:
Закрыть X