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>
И использование компонента 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

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>