2015-11-06 11 views
7

Vue.js 1.0 examples के बाद, मैं वी मॉडल परियोजना के साथ एक का चयन लटकती कर दिया है, इस तरह:Vue.js 1.0 परिवर्तन पर फायरिंग नहीं विधि का चयन

{{ project }} 
<select class="projects" v-model="project" @change="changeProject"> 
    <option value="1">School</option> 
    <option value="2">Personal</option> 
    <option value="3">Work</option> 
</select> 

js बिट:

new Vue({ 
    el: '#main', 
    data: { 
     project: '' 
    }, 
    methods: { 
     changeProject: function(){ 
      console.log(this.project); 
     } 
    } 
}); 

टैग {{ project }} सही ढंग से प्रदर्शित हो रहा है, लेकिन जब मैं चुनिंदा ड्रॉपडाउन पर एक और मूल्य चुनता हूं तो यह विधि changeProject को सक्रिय नहीं करता है।

मुझे यहां क्या याद आ रही है?

चीयर्स।

संपादित करें:

@ Mustafo के जवाब के बाद, मैं एक @click विधि के साथ एक सरल बटन बनाने की कोशिश की है और यह मूल्य मुद्रित करें। इस चयन पर केवल @change काम नहीं कर रहा है।

EDIT2:

मैंने महसूस किया गया है क्यों यह काम नहीं कर रहा। मैं एक jquery फ़ंक्शन के साथ इस चयन बॉक्स का चयनित विकल्प बदल रहा हूं, क्योंकि मुझे एक पूर्ण सीएसएस स्टाइल ड्रॉपडाउन बनाने की आवश्यकता है, और फिर मैंने इसके लिए "मुखौटा" बनाया है।

+2

लेकिन यह काम कर रहा है। [jsfiddle] (http://jsfiddle.net/nnbr214c/) –

+1

अजीब ... मेरा नहीं है। हालांकि एक बटन पर एक साधारण @ क्लिक काम कर रहा है। – rafamds

उत्तर

7

ठीक है, मैंने इस मुद्दे में भी भाग लिया है। मेरे हिसाब से उचित समाधान v-model जोड़ने टैग का चयन करें और फिर watch वस्तु में इस मॉडल का देख जोड़ने के लिए है:

watch: { 
    myModel: function(currentValue) { 

     // do my stuff 
    } 
} 
2

ऐसा लगता है कि vue.js के आपके संस्करण shorthands का समर्थन नहीं करता है। v-on:change="..."@change="..."

+3

आपके उत्तर @mustafo के लिए धन्यवाद। मैंने इस तरह से कोशिश की है, लेकिन यह अभी भी काम नहीं कर रहा है – rafamds

संबंधित मुद्दे