Vue.js 1,0 metoda nie wypalania w sprawie zmian wybierz

Question

Po Vue.js 1.0 examples, zrobiłem wybraną listę rozwijaną z v-modelu projektu, podobnie jak to:

{{ 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 bit:

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

Znacznik {{ project }} wyświetla się poprawnie, ale gdy wybiorę inną wartość z listy rozwijanej wybierz, to nie uruchamia ona metody changeProject.

Czego mi tu brakuje?

Pozdrawiam.

EDIT:

Po użytkownika @ mustafo odpowiedź, próbowałem stworzyć prosty przycisk z metodą @Kliknij i drukować wartość. Tylko @ na tej opcji nie działa.

EDIT2:

zdałem sobie sprawę, dlaczego to nie działa. Zmieniam wybraną opcję tego pola wyboru za pomocą funkcji jquery, ponieważ potrzebowałem utworzyć listę rozwijaną z pełnym stylem css, a następnie utworzyłem dla niej "maskę".

Answer 1

Cóż, również mam do czynienia z tym problemem. Właściwym rozwiązaniem według mnie jest dodać v-model aby wybrać znacznik, a następnie dodać obserwowanie tego modelu w watch obiektu:

watch: { 
    myModel: function(currentValue) { 

     // do my stuff 
    } 
} 

Answer 2

Wygląda na to, że twoja wersja vue.js nie obsługuje skrótów. Wypróbuj v-on:change="..." zamiast @change="..."