Vuejs ने

Question

प्रस्तुत करने पर रेडियो घटक साझा नहीं किया है, मेरे पास एक व्यय घटक है जो अतिरिक्त मार्कअप और स्टाइल के साथ एक देशी रेडियो इनपुट बढ़ाता है, इसका इरादा यह है कि इसे नियमित रूप से रेडियो के लिए स्टैंड-इन के रूप में उपयोग किया जा सकता है:

<div class="radios"> 
    <radio-input name="radioInput" value="one" v-model="options.firstOption"> 
    <radio-input name="radioInput" value="two" v-model="options.firstOption"> 
    <radio-input name="radioInput" value="three" v-model="options.firstOption"> 
</div> 

मैं दृष्टिकोण निम्नलिखित किया गया है here (jsfiddle here) ने सुझाव दिया है, लेकिन एक वी मॉडल विशेषता है, जो इस उदाहरण ऐसा नहीं करता है स्वीकार करने के लिए घटक की क्षमता जोड़ के लिए इच्छुक हूँ।

यहाँ मेरी .vue घटक फ़ाइल अब तक बताया गया है:

<template> 
    <span class="radio-control"> 
    <input 
     class="input-bool" 
     type="radio" 
     :name="name" 
     :value="value" 
     v-model="radioButtonValue"> 
    </span> 
</template> 

<script> 
    export default { 
    model: { 
     prop: 'checked', 
    }, 
    props: { 
     name: String, 
     value: String, 
     checked: String 
    }, 
    computed: { 
     radioButtonValue: { 
     get: function() { 
      return this.checked; 
     }, 
     set: function() { 
      this.$emit('input', this.value); 
     } 
     } 
    }, 
    }; 
</script> 

सभी अच्छे, परिवर्तन पर अच्छा काम करता है, मॉडल अद्यतन। मुद्दा यह है कि जब घटक प्रस्तुत करता है तो रेडियो की चेक की गई विशेषता लागू नहीं होती है, इसलिए यदि कोई पृष्ठ को हिट करता है, तो सभी रेडियो एक बदलाव घटना होने तक खाली के रूप में दिखाई देते हैं।

Vue के डॉक्स explicitly state कि "v-model प्रारंभिक मूल्य पर ध्यान नहीं देगा, किसी भी रूप तत्वों पर पाया विशेषताओं जाँच या का चयन किया। यह हमेशा सत्य के स्रोत के रूप में Vue उदाहरण डेटा का इलाज करेंगे।" इसे जोड़ने से उम्मीद के मुकाबले कोई फर्क नहीं पड़ता है। लेकिन मुझे मूल checked विशेषता प्रस्तुत करने के लिए वर्तमान रेडियो बटन होने में कठिनाई हो रही है।

Answer 1

कोई vue.js मुद्दा नहीं है, @bertEvans सही था कि मैंने जो कोड पोस्ट किया है वह काम कर रहा है। समस्या यह थी कि मेरे पास उसी पृष्ठ पर रेडियो इनपुट का एक अलग सेट था जो name="" विशेषता के साथ था। दोस्तों, यदि आपके रेडियो समूह अपेक्षित व्यवहार नहीं कर रहे हैं, तो सुनिश्चित करें कि प्रत्येक समूह का एक अद्वितीय नाम है!