Bagaimana cara merender komponen khusus ke dalam popup penanda peta?

Saya menggunakan komponen plugin Vue Timeago, dan saya ingin menampilkan waktu timeago di konten dari plugin peta. Contoh yang sangat disederhanakan untuk menggambarkan penggunaannya adalah seperti:

let popup = L.responsivePopup().setContent(`
    <h1>Hello world</h1>
    <p>A thing happened <Timeago datetime="${datetime}"></Timeago></p>
`);
L.marker([lat, lon]).bindPopup(popup).addTo(this.map);

Menurut jawaban ini, dan Dokumentasi Vue, saya seharusnya bisa mengkompilasi ini menggunakan Vue.compile(), tetapi saya tidak memahami konsepnya.

Pertama, tidak ada penjelasan tentang apa itu "full build". Bagaimana cara mengetahui apakah yang saya miliki adalah "build penuh"? Menelusuri "vuejs full build" tidak menghasilkan apa pun yang secara harfiah disebut sebagai frasa tersebut, meskipun mereka menggunakannya dalam dokumentasi di sana. Yang saya tahu adalah ketika saya mencoba menelepon Vue.compile() dengan mengimpor import Vue from 'vue', ia mengeluh dengan mengatakan:

TypeError: vue__WEBPACK_IMPORTED_MODULEVue.compile()_.default.compile bukan fungsi

Jadi saya tidak tahu ke mana harus pergi setelah itu.

Dan hal kedua adalah (dengan asumsi hal pertama diurutkan), apakah saya harus membuat HTML saya menampung div kosong dengan id tertentu, menunggu hingga dirender, dan kemudian memanggil Vue.compile() di atasnya, karena kode contoh di sana berjalan dengan .mount() pada id elemen? Karena itu sepertinya sedikit "salah", sepertinya ada langkah ekstra. Atau apakah itu satu-satunya cara agar skenario ini berhasil?

Jika ada alternatif menunggu yang lebih sederhana untuk membuat ini berfungsi, seperti membuat komponen Timeago hanya mengembalikan string yang dirender saja, seperti 2 hours ago yang dapat saya masukkan ke dalam string literal saya, itu juga akan berhasil untuk saya. Apa pun itu baik-baik saja.


vuejs2 vue-component
person Digital Ninja    schedule 31.08.2019    source sumber

Jawaban (1)


arrow_upward
0
arrow_downward

Vue memiliki build paket yang berbeda, full berarti paket tersebut dapat mengkompilasi template dan menjalankannya. Semua tipe build dapat ditemukan di sini https://vuejs.org/v2/guide/installation.html#Explanation-of-Different-Builds

Vue.compile memungkinkan Anda menggunakan fungsi render, yang memungkinkan Anda memanipulasi DOM dan membuat elemen dengan cara terprogram. Di sini Anda dapat menemukan dokumentasi Vue tentang hal tersebut https://vuejs.org/v2/guide/render-function.html

Tentang masalah yang Anda hadapi, Anda dapat membuat komponen vue dan meletakkan popup tersebut di dalamnya, komponen ini ketika dirender akan merender komponen timeago.

<template>
    <h1>Hello world</h1>
    <p>A thing happened <Timeago datetime="${datetime}"></Timeago></p>
</template>

import Timego from './Timeago.vue'

export default {
    components: {
        Timeago
    },

    props: {
        datetime: String
    }
}
person Luis Brito    schedule 31.08.2019
comment
Maaf, tapi saya tidak mengerti bagaimana kedua hal ini dapat membantu. Bagian pertama tentang fungsi render, yang tampak seperti pengganti penulisan HTML, tetapi sepertinya bukan metode untuk membuat HTML yang dirender sesuai permintaan. Dalam situasi saya, yang terjadi adalah pada klik pengguna, saya pada dasarnya membuat elemen DOM baru (melalui Leaflet), yang saya sediakan hanya HTML statis untuk ditampilkan di popup. Jadi saya tidak melihat di mana mekanisme di mana saya akan memberitahu vue untuk menjalankan komponen Timeago ini untuk mengubah 02-09-2019 menjadi hari ini, dan mengembalikan seluruh hasil itu kepada saya. Kamu tahu? - person Digital Ninja; 02.09.2019