Vue: تعمل المسافة غير الفاصلة بشكل مختلف عن الشخصيات الأخرى - النواتج "" في القالب عند تمريرها عبر الدعائم

تم إنشاؤها على ٤ أكتوبر ٢٠١٨ · 11تعليقات · مصدر: vuejs/vue

الإصدار

2.5.17

رابط الاستنساخ

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

خطوات التكاثر

أنشئ مكونًا جديدًا يقبل خاصية سلسلة.
اعرض الخاصيّة في قالب المكوّن.
استخدم المكون في تطبيق Vue وقم بتمرير سلسلة تحتوي على حرف مسافة غير فاصل للعنصر.

ما هو متوقع؟

يجب أن يحتوي الإخراج على مسافة غير منقسمة

ما الذي يحدث بالفعل؟

يظهر الناتج  

في المثال المقدم لقد قمت بعمل 3 حالات

الحالة الأولى هي أن   تحول إلى  
الحالة الثانية هي أنه في قائمة طويلة من أحرف UTF-8 يتم فقط هروب NON-BREAKING SPACE .
وثالثًا عند الحصول على نفس قائمة الأحرف ، ولكن عند استرجاعها من HTMLElement عادي مع document.querySelector('#test').title فإن الحرف ليس مهربًا.

ملاحظة : عند نسخ حرف مسافة غير منقسمة ، قد يتحول إلى مسافة عادية في الحافظة. لذلك استخدم https://en.wikipedia.org/wiki/Non-breaking_space#Keyboard_entry_methods للتأكد من كيفية إدراج الحرف.

bug

مصدر

Eibx

👍1

التعليق الأكثر فائدة

كحل بديل ، حاول وضع رمز الهروب من JS لـ   - \xa0

وجدت هنا ، عملت بالنسبة لي في وظيفة nonbreakinspacification

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

يتم عرض السلاسل التي تم إرجاعها بواسطة هذه الوظيفة بـ &nbsp s بدلاً من المسافات.

grreeenn في ٢١ أكتوبر ٢٠١٩

👍8

ال 11 كومينتر

لقد أضفت مثالًا جديدًا - حيث في قائمة كيانات html (بما في ذلك المسافات البيضاء الأخرى والأحرف الصفرية العرض) - لم يتم فك تشفير   .

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

لقد لاحظت أيضًا أنه في mathiasbynens / هناك إدخالان مقابل   واحد بدون simicolon والآخر مع simicolon.

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

قد تكون طلقة في الظلام ، ولكن هل يمكن أن يكون لذلك أي تأثير على النتيجة أعلاه؟

Eibx في ١٧ أكتوبر ٢٠١٨

لقد حاولت استخدام mathiasbynens / he v1.1.1 للعثور على أي تناقضات مع   ، لكن لم أتمكن من العثور على أي منها.

لقد حاولت تكرار ملفات jsfiddles السابقة الخاصة بي ، لمعرفة ما إذا كان رد فعل   مختلفًا.

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

إذا كان بإمكان أي شخص إعطائي بعض المؤشرات حول مكان البحث عن هذا الخطأ ، فأنا أكثر من سعيد لمنحه فرصة.

كما سأكون ممتنا للغاية أي رد على هذه القضية.

Eibx في ٢٩ أكتوبر ٢٠١٨

يبدو أنه خطأ بالنسبة لي - الإصلاح سيكون لطيفًا

rosrosros في ٣٠ أكتوبر ٢٠١٨

لقد لاحظت مشكلات مع × في بعض الأحيان. لنفترض أن خاصية مكون لها قيمة افتراضية × ، والتي يتم عرضها في المكون (v-html). عند التقديم ، يظهر الحرف الفعلي x ويسبب كفالة ترطيب SSR.

tmorehouse في ٢ نوفمبر ٢٠١٨

مثال آخر: https://jsfiddle.net/onbzk0m6/ (حرف)

approached في ٢٣ نوفمبر ٢٠١٨

نعم - يبدو أنه مرتبط بطريقة تحليل Vue لسمات html بشكل عام.

لقد قدمت مثالًا مشابهًا استنادًا إلى مثال approached
https://jsfiddle.net/onbzk0m6/3/

Eibx في ٢٣ نوفمبر ٢٠١٨

👍3

كحل بديل ، حاول وضع رمز الهروب من JS لـ   - \xa0

وجدت هنا ، عملت بالنسبة لي في وظيفة nonbreakinspacification

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

يتم عرض السلاسل التي تم إرجاعها بواسطة هذه الوظيفة بـ &nbsp s بدلاً من المسافات.

grreeenn في ٢١ أكتوبر ٢٠١٩

👍8

عثرت على نفس المشكلة: ينتج عن كيان html "" كنص عند استخدامه في القوالب بدلاً من الواصلة الناعمة. الشيء نفسه بالنسبة إلى "" وغيرهم.
Vue 2.6.10

styxxx في ٢٤ فبراير ٢٠٢٠

للأشخاص الذين يبحثون عن حل بديل لهذا:
عند تمرير سلسلة بها مسافات غير منقسمة كدعم ، قمت فقط باستبدال المسافات بأحرف من غير المحتمل أن تكون جزءًا من السلسلة ، في حالتي "zzz"
var newName = program_name.replace(/\s/g,'zzz');

بعد ذلك ، في المكون الفعلي حيث أحتاج إلى عرض هذه الخاصية أو استخدامها ، لديّ وظيفة محسوبة تبطل الإجراء أعلاه وتستبدل أحرف العنصر النائب بمسافات مرة أخرى

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

lurein في ٢٨ يوليو ٢٠٢٠

posva آسف على المتاعب ، لقد وجدت حلاً لهذه المشكلة.

بعد الإصلاح ، سيكون سلوك Vue هو نفسه HTML ، تمامًا مثل لقطة الشاشة أدناه ،

هل يمكنني معالجة هذه المشكلة وتقديم طلب سحب؟

JuniorTour في ٢ أغسطس ٢٠٢٠

اكيدuniorTour

قد تكون هذه المشكلة متعلقة بـ https://github.com/vuejs/vue/issues/10485 و https://github.com/vuejs/vue/issues/11059
لذا من المفيد إلقاء نظرة على العلاقات العامة الحالية أيضًا