Vue: <select>يرتبط بالصفيف بشكل غير صحيح بعد لصق ()</select>

تم إنشاؤها على ٣٠ سبتمبر ٢٠١٦ · 6تعليقات · مصدر: vuejs/vue

ضع في اعتبارك الكود التالي:

<div id="demo">
  <select v-model="selected" number>
    <option v-for="opt in options" :value="$index" number>{{opt}}</option>
  </select>
</div>

في <select> ، ترتبط كل قيمة خيار بـ $index . إذا قمنا بتنفيذ splice() على options ، مثل ، options.splice(0,1) ، $index لا تتم مزامنة الخيارات بشكل صحيح.

على سبيل المثال ، دع options=['a','b'] وسيبدو HTML المعروض (ولكن ليس في الحقيقة):

<div id="demo">
  <select selectedIndex="0">
    <option value="0">a</option>
    <option value="1">b</option>
  </select>
</div>

بعد options.splice(0,1) ، ثم options=['b'] ، لكن HTML المعروض يصبح:

<div id="demo">
  <select selectedIndex="0">
    <option value="1">b</option>
  </select>
</div>

قيمة الخيار "b" لا تصبح 1 ، والتي يجب أن تكون 0 بسبب $index . قد لا يكون هذا خطأ ، لكن هذا غريب نوعًا ما.

يوجد أدناه عرض مباشر لهذه المشكلة:
https://jsfiddle.net/peteranny/trwp98g9/4/

bug

مصدر

peteranny

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

تم الاختبار على 2.0 وعمل كما هو متوقع: https://jsfiddle.net/dycmgzcm/
لذلك أضع علامة على هذا باعتباره خطأ 1.x

fnlctrl في ٢ أكتوبر ٢٠١٦

👍2

ال 6 كومينتر

ما عليك سوى إضافة سمة محددة في نموذجك selected="{{$index == selected}}"

أقوم بتحديث العرض التوضيحي هنا https://jsfiddle.net/trwp98g9/5/

defcc في ١ أكتوبر ٢٠١٦

👍1

@ peteranny هل يمكنك توضيح ما هو السلوك المتوقع؟

بعد options.splice (0،1) ، ثم options = ['b'] ، لكن HTML الذي يتم عرضه يصبح:
<option value="1">b</option>

لا أحصل على نفس النتيجة التي قدمتها من هنا:
قبل النقر فوق إزالة:
before

بعد النقر:
after

لا تصبح قيمة الخيار "b" 1 ، والتي يجب أن تكون 0 بسبب $ index

إذن ما الذي يجب أن تصبح عليه بالضبط؟ كانت قيمة "b" هي 1 قبل النقر ، وأصبحت 0 بعد النقر.

fnlctrl في ١ أكتوبر ٢٠١٦

fnlctrl أم ، شكرًا لك على الاختبار. أعتقد أنني سألت السؤال الخطأ.
وفقًا للاختبار الذي أجريته ، أصبحت قيمة "b" صفرًا بعد النقر.

سؤالي الحقيقي هو: الآن بعد أن كانت قيمة "b" تساوي 0 ، فلماذا لم يتم اختيار "b" على أي حال <select> ؟
كما هو موضح في صورتك ، لم يحدد <select> أي خيار على الإطلاق ، بينما يجب على <select> تحديد الخيار مع القيمة 0.
(ولهذا السبب كنت أظن أن قيمة "ب" لم تتغير).

peteranny في ٢ أكتوبر ٢٠١٦

peteranny قد يكون خطأ لأن selected بقي 0 بينما تغير options ، ومن المفترض أن يعكس dom هذا التغيير ، لكنني لست متأكدًا ..

في الوقت الحالي ، يمكنك محاولة إضافة selected prop كما اقترح defcc ، (لاحظ أن ربط الشارب :selected="$index == selected" بدلاً من ذلك)
أو يمكنك إضافة خاصية track-by إلى <options> ، مما جعل vue يعتقد أنه من الآمن تحديث القيمة المحددة في dom. https://jsfiddle.net/74ncq90w/

fnlctrl في ٢ أكتوبر ٢٠١٦

👍2

تم الاختبار على 2.0 وعمل كما هو متوقع: https://jsfiddle.net/dycmgzcm/
لذلك أضع علامة على هذا باعتباره خطأ 1.x

fnlctrl في ٢ أكتوبر ٢٠١٦

👍2

يعد إغلاق مشكلات 1.x كـ 1.x الآن نهاية العمر الافتراضي وسيتلقى فقط تصحيحات الأمان الهامة.