Vue.js 3 Монтирование экземпляров компонентов во время выполнения

Я пробую vue-leaflet/vue-leaflet и пытаюсь создать много экземпляров <l-polyline> внутри <l-map> компонента. Но я не знаю, как этого добиться.

Статическая версия (карта поставляется с нарисованной ломаной):


<template>
  <l-map ref = "map" v-model:zoom = "zoom" :center = "[47.41322, -1.219482]">
    <l-polyline
        :lat-lngs = "[
        [47.334852, -1.509485],
        [47.342596, -1.328731],
        [47.241487, -1.190568],
        [47.234787, -1.358337],
      ]"
        color = "green"
    />
  </l-map>
</template>

Динамическая попытка (подготовить функцию для добавления полилиний программно, не работает):

<template>
  <l-map ref = "map" v-model:zoom = "zoom" :center = "[47.41322, -1.219482]">
  </l-map>
</template>

<script lang = "ts">
function someAction(){
let poly= createApp(LPolyline,{
  latLngs:[[47.334852, -1.509485],
    [47.342596, -1.328731],
    [47.241487, -1.190568],
    [47.234787, -1.358337]]
});
poly.mount(this);

}

</script>

Чтобы уточнить, мне нужна функция для вставки/добавления компонентов LPolyline в компонент LMap во время выполнения, ее не следует изначально объявлять внутри LMap, если это возможно.

Я только что запустил Vue.js, поэтому извиняюсь, если делаю очевидную ошибку. Спасибо за Ваше понимание.

vue.js leaflet vue-component vuejs3

23.04.2023 20:46

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Пожалуйста, взгляните на следующий фрагмент:

new Vue({
  el: '#demo',
  components: {
    'l-map': window.Vue2Leaflet.LMap,
    'l-polyline': window.Vue2Leaflet.LPolyline,
  },
  data() {
    return {
      zoom: 7,
      latLngs: [[47.334852, -1.509485], [47.342596, -1.328731], [47.241487, -1.190568], [47.234787, -1.358337]]
    }
  }
})

<script src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel = "stylesheet" href = "https://unpkg.com/leaflet/dist/leaflet.css" />
<script src = "https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script src = "https://unpkg.com/vue2-leaflet"></script>

<div id = "demo">
  <l-map ref = "map" :zoom = "zoom" :center = "[47.41322, -1.219482]"  style = "height: 300px">
    <l-polyline :lat-lngs = "latLngs" color = "green"></l-polyline>
  </l-map>
</div>

Извините, но это не то, что я ищу. Мне нужно решение, в котором компонент LPolyLine добавляется впоследствии, изначально его не должно быть в определении компонента. Потому что с решением, которое мне нужно, я должен иметь возможность вводить множество элементов LPolyLine во время выполнения.

— 23.04.2023 22:34

23.04.2023 22:05

Ответ принят как подходящий

Просто добавьте компоненты, которые хотите использовать, а затем снабдите их данными, как любой другой компонент Vue. Например, вы можете загрузить полилинии из массива с помощью v-for:

    <l-map :zoom = "zoom" :center = "center">
      <l-polyline
        v-for = "line in lines"
        :key = "line.id"
        :lat-lngs = "line.latLongs"
        :color = "line.color"
      />
    </l-map>

Загляните в песочницу

v-for может быть то, что я ищу. Хорошо выглядеть. Спасибо за пример с песочницей, это очень помогло мне понять концепцию

— 23.04.2023 22:36

23.04.2023 22:13