Вот странная проблема с иконками Font Awesome 5 (версия SVG) в приложении Vue. Я воспроизвел это в новом минимальном приложении Vue:
https://www.dropbox.com/s/9xf0bim26lzsp7x/hello-world.tgz?dl=0
, которое можно запускать локально с помощью `npm run serve 'и получить доступ к http://localhost:8080/#/detail/123
В представлении есть значок с отличным шрифтом и разметкой:
<template>
<div>
<div class="text-center">
item.id {{item.id}}
<p v-if="item.status == 'New'">Please confirm your appointment:</p>
<!-- class="fas fa-user" not useful. Sometimes icons are mess up. -->
<p>{{item.practitioner_name}}</p>
<p><i class="fas fa-map-marked-alt"></i> <a
:href="item.address_map_href"
target="_blank"
>{{item.address.address1}} </a>
<span v-if="item.address.address2">; </span>
{{item.address.address2}}
</p>
<p>
{{item.day}}<br>
</p>
<div v-if="item.status == 'New'">
<button
variant="primary"
@click="itemConfirm()"
class="w-md"
><i class="fas fa-check"></i> Confirm</button>
<br><br>
</div>
</div>
</div>
</template>
<script>
export default {
props: ['id'],
components: {
},
data: () => ({
item: {
address: {} //avoid error on render
}
}),
async mounted() {
// eslint-disable-next-line no-console
console.log("sadf")
if (this.id && this.id != '0') {
this.item = {
"id": "mkt7y3v0m5vupnal",
"practitioner_id": "yyie5csyc0y1lwcg",
"day": "2019-11-08",
"start_time": "16:00",
"end_time": "16:45",
"status": "New",
"practitioner_name": "Dr",
address: {}
}
}
},
methods: {
itemConfirm() {
this.item.status = 'Confirmed'
},
}
}
</script>
Результат после нажатия Подтвердить:
Наблюдения
Разметка svg появляется дважды в DOM (см. Инспектор браузера на скриншоте)
Шрифт Awesome js загружается в index.html с <script defer src="https://kit.fontawesome.com/mykit.js" crossorigin="anonymous"></script>
Удаление шрифта Awesome решает как отображение дубликата разметки, так и ошибку JS
Каково было бы решение продолжить использование Font Awesome?
ошибка JS:
vue.esm.js? A026: 628 [Vue warn]: ошибка в nextTick: «NotFoundError: не удалось выполнить« insertBefore »на« Node »: узел, перед которымновый узел, который нужно вставить, не является дочерним для этого узла. "
itemConfirm @ RecordDetail.vue? f97b: 145
click @ RecordDetail.vue? e784: 50
invokeWithErrorHandling @ vue.esm.js? a026: 1863
invoker @ vue.esm.js? a026: 2184
original._wrapper @ vue.esm.js? a026: 7559
vue.esm.js? a026: 1897 DOMException: Не удалось выполнить «insertBefore» для «Node»: узел, перед которым должен быть вставлен новый узел, не является дочернимэтот узел.
В моем коде нет функции nextTick (). Я не использую v-for (рассматривал это как другую причину).