Vue: Spasi non-breaking bekerja berbeda dari karakter lain - "" mengeluarkan "" dalam template saat diteruskan melalui props

Dibuat pada 4 Okt 2018 · 11Komentar · Sumber: vuejs/vue

Versi: kapan

2.5.17

Tautan reproduksi

https://codepen.io/avertes/pen/LYYpNRe
https://jsfiddle.net/50wL7mdz/756973/

Langkah-langkah untuk mereproduksi

Buat komponen baru yang menerima prop string.
Tampilkan prop di dalam template komponen.
Gunakan komponen dalam aplikasi Vue dan berikan string yang berisi karakter spasi non-breaking untuk prop.

Apa yang diharapkan?

Keluaran harus berisi spasi yang tidak putus

Apa yang sebenarnya terjadi?

Outputnya menunjukkan  

Dalam contoh yang diberikan, saya telah membuat 3 kasus

Kasus pertama adalah   diubah menjadi  
Kasus kedua adalah bahwa dalam daftar panjang karakter UTF-8 hanya NON-BREAKING SPACE yang lolos.
Dan ketiga ketika mendapatkan daftar karakter yang sama, tetapi mengambilnya dari HTMLElement dengan document.querySelector('#test').title karakter tersebut tidak dapat melarikan diri.

Catatan : Saat menyalin karakter spasi non-breaking mungkin berubah menjadi spasi biasa di clipboard. Untuk itu gunakan https://en.wikipedia.org/wiki/Non-breaking_space#Keyboard_entry_methods untuk memastikan cara memasukkan karakter.

bug

Sumber

Eibx

👍1

Komentar yang paling membantu

sebagai solusinya, coba letakkan kode escape JS untuk   - \xa0

ditemukan di sini , bekerja untuk saya di fungsi nonbreakinspacification

    public static noBreakingSpaces(str: string): string {
        return str.replace(' ', '\xa0');
    }

string yang dikembalikan oleh fungsi ini sedang dirender dengan &nbsp s sebagai ganti spasi.

grreeenn pada 21 Okt 2019

👍8

Semua 11 komentar

Saya telah menambahkan contoh baru - di mana dalam daftar entitas html (termasuk spasi kosong lainnya dan karakter lebar nol) - hanya   tidak diterjemahkan.

https://jsfiddle.net/50wL7mdz/765399/

Juga saya perhatikan bahwa di mathiasbynens / he ada dua entri untuk   satu tanpa simicolon dan satu dengan simicolon.

https://github.com/mathiasbynens/he/blob/master/data/entities.json#L1470

Mungkin bidikan dalam kegelapan, tetapi bisakah ini memengaruhi hasil di atas?

Eibx pada 17 Okt 2018

Saya telah mencoba menggunakan mathiasbynens / he v1.1.1 untuk menemukan ketidakkonsistenan dengan   , tetapi belum dapat menemukannya.

Saya sudah mencoba menduplikasi jsfiddles saya sebelumnya, untuk melihat apakah   akan bereaksi berbeda.

https://jsfiddle.net/ebpcx1do/3/

Jika ada yang bisa memberi saya beberapa petunjuk tentang di mana mencari kesalahan ini, saya akan dengan senang hati mencobanya.

Saya juga akan sangat menghargai tanggapan apa pun terkait masalah ini.

Eibx pada 29 Okt 2018

Sepertinya bug bagi saya - perbaikan akan menyenangkan

rosrosros pada 30 Okt 2018

Saya pernah melihat masalah dengan × . katakanlah sebuah prop komponen memiliki default × , yang dirender dalam komponen (v-html). Saat rendering itu menunjukkan karakter x dan menyebabkan jaminan hidrasi SSR.

tmorehouse pada 2 Nov 2018

Contoh lain: https://jsfiddle.net/onbzk0m6/ (karakter)

approached pada 23 Nov 2018

Ya - ini tampaknya terkait dengan cara Vue mem-parsing atribut html secara umum.

Saya telah membuat contoh serupa berdasarkan contoh @approached
https://jsfiddle.net/onbzk0m6/3/

Eibx pada 23 Nov 2018

👍3

sebagai solusinya, coba letakkan kode escape JS untuk   - \xa0

ditemukan di sini , bekerja untuk saya di fungsi nonbreakinspacification

    public static noBreakingSpaces(str: string): string {
        return str.replace(' ', '\xa0');
    }

string yang dikembalikan oleh fungsi ini sedang dirender dengan &nbsp s sebagai ganti spasi.

grreeenn pada 21 Okt 2019

👍8

Saya menemukan masalah yang sama: Entitas html menghasilkan "" sebagai teks saat digunakan dalam template, bukan tanda hubung halus. Hal yang sama untuk "" dan lainnya.
Vue 2.6.10

styxxx pada 24 Feb 2020

untuk orang-orang yang mencari solusi untuk ini:
Saat melewatkan string dengan spasi non-breaking sebagai prop, saya hanya mengganti spasi dengan karakter yang tidak mungkin menjadi bagian dari string, dalam kasus saya 'zzz'
var newName = program_name.replace(/\s/g,'zzz');

Kemudian, dalam komponen aktual di mana saya perlu menampilkan atau menggunakan properti ini, saya memiliki fungsi yang dihitung yang membatalkan tindakan di atas dan mengganti karakter placeholder dengan spasi lagi

correctedProgramName(){ //this reverses the space-replacing we had to do in reporting-dashboard.js
        let correctedProgramName = this.program_name.replace(/zzz/g, ' ')
        return correctedProgramName
      }