0
votes

Pourquoi Vue.js @input n'est-il pas tiré lorsque vous cliquez sur le bouton?

Lorsque je change code> de la valeur code> directement (cliquez sur l'élément d'entrée et tapez une nouvelle valeur) alerte code> est tiré. p>

p>


<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <input type="text" v-model.number="count" @input="alert">
  <button @click="add">+1</button>
</div>

vue.js

6 commentaires

Votre alerte est sur la balise d'entrée, pas la balise du bouton. Pourquoi vous attendriez-vous à cliquer sur le bouton pour déclencher une alerte?

Parce que la valeur de changement elle-même devrait déclencher un événement.

Changer @Input à @ CHANGE = "ALERTE ('TEST')"


                                        
                                                                            @ Miloslav21  @Input  déclenchera lorsque l'utilisateur saisit quelque chose, pas lorsque la valeur dans cette case change. Vous voudrez utiliser quelque chose comme  Watch  si vous souhaitez regarder pour le compte pour changer.

                                        
                                                                            Sur une note non liée, vous trouverez un bogue dans votre code où si vous supprimez ce qui est dans la zone de texte et appuyez à nouveau sur la touche "+1", il commence juste à ajouter "1" de l'augmentation du compte. Cela se produit également si vous mettez une lettre au début de ce qui est dans la boîte de saisie. Je pense que le JavaScript ne fait que traiter la valeur comme une chaîne lorsque cela se produit; Vous voudrez probablement gérer cela.
                                        
                                                                            @Jameswhiteley tu as raison. Merci d'avertissement.



                                    
                    3 Réponses :
                    
                                            
                            
                                
                                    0
 votes
                                
                            
                            
                                
                                     Vous pouvez appeler  alerte  code> à partir de l'intérieur  Ajouter  code> Méthode: 
  p> 


add: function() {
  this.count += 1;
  // invoke alert()
  this.alert();
}

                                

                                                                    
                                    
                                    
                                        4 commentaires
                                        
                                                                                            
                                                    Oui, mais pourquoi n'est-il pas licencié par l'événement de saisie?  L'événement d'entrée déclenche lorsque la valeur d'une ,  a été modifiée. </ code> <a href="https://developer.mozilla.org/en-us/docs/web/api/htmelement/input_event" rel="nofollow noreferrer"> développeur.mozilla.org/en-us/ Docs / Web / API / HTMLElement / ... </a>                                                </p>
                                                <hr>
                                                                                            <p class="answer-comment">
                                                    Oui, l'événement sera tiré si vous modifiez la valeur en tapant dans le champ de saisie, car le navigateur déclenche l'événement réellement. Ici, la valeur change par VUE.JS ou JS.                                                </p>
                                                <hr>
                                                                                            <p class="answer-comment">
                                                    @ Miloslav21 Vous n'êtes pas <i> VRAIMENT </ i> Changement de la valeur d'entrée, vous modifiez une valeur de données liée à l'entrée. <Code> @input </ code> est spécifiquement destiné à un utilisateur modifiant directement le champ, non pour toute modification apportée sur le champ à la suite de quelque chose comme <code> Data </ Code>.                                                </p>
                                                <hr>
                                                                                            <p class="answer-comment">
                                                    @Jameswhiteley tu as raison. La propriété de la valeur n'est pas vraiment modifiée.                                                </p>
                                                <hr>
                                                                                    </div>
                                    </div>
                                                            </div>
                        </div>
                        <hr>
                                            <div class="row mt-3">
                            <div class="col-lg-1 col-md-2 col-2 col-sm-2 text-center pt-1 mx-0 px-0">
                                <div class="badge badge-score">
                                    0<br> votes
                                </div>
                            </div>
                            <div class="col-lg-11 col-md-10 col-10 col-sm-10">
                                <div class="body-content">
                                    <p> Je suis sûr que son @Change pas @input: <p> <code> <type d v-model.number="Comptez" change="ALERTE">  P>  P>  P>  P>  P>  P>  P> <p> Alternativement:  P> </p><pre>watch : {

   number: function (newVal) {

     alert();

  }

}
</pre></type></code></p></p>
                                </div>

                                                                    <hr>
                                    <!-- comments -->
                                    <div class="pl-5">
                                        <small class="text-muted">0 commentaires</small>
                                        <div class="comments mt-3">
                                                                                    </div>
                                    </div>
                                                            </div>
                        </div>
                        <hr>
                                            <div class="row mt-3">
                            <div class="col-lg-1 col-md-2 col-2 col-sm-2 text-center pt-1 mx-0 px-0">
                                <div class="badge badge-score">
                                    0<br> votes
                                </div>
                            </div>
                            <div class="col-lg-11 col-md-10 col-10 col-sm-10">
                                <div class="body-content">
                                    <p> <code> @Input  code> ne modifie aucune modification d'une étiquette  code> d'entrée  code>; Il est spécifiquement déclenché lorsqu'un utilisateur modifie directement la balise  code> entrée  code>. Vous voulez quelque chose comme <code> watch  code>: <p>  p> </p><div class="snippet" data-lang="js" data-hide="false" data-console="FALSE" babel="faux">
<div classe="code d'extraction">
<pre><script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <input type="text" v-model.number="count" />
  <button @click="add">+1</button>
</div></pre></div></div></code></code></p>
                                </div>

                                                                    <hr>
                                    <!-- comments -->
                                    <div class="pl-5">
                                        <small class="text-muted">0 commentaires</small>
                                        <div class="comments mt-3">
                                                                                    </div>
                                    </div>
                                                            </div>
                        </div>
                        <hr>
                                    
            </div>
            <div class="col-lg-3 col-md-12 col-12 col-sm-12" >
                <div class="related">
		    <iframe src="https://rcm-eu.amazon-adsystem.com/e/cm?o=8&p=12&l=ez&f=ifr&linkID=b777da379e25dfc65f34887292b82918&t=birdy0c-21&tracking_id=birdy0c-21" width="300" height="250" scrolling="no" border="0" marginwidth="0" style="border:none;" frameborder="0"></iframe>
                    <p class="font-weight-bold">Articles qui pourrait vous intéresser :</p>
                                            <a href="/question/est-il-possible-de-cr-eacute-er-une-application-vue-sans-vue-cli" class="">
                            Est-il possible de créer une application vue sans vue-cli?                        </a>
                        <hr>
                                            <a href="/question/comprendre-la-liaison-bidirectionnelle-vue-js-v-model" class="">
                            Comprendre la liaison bidirectionnelle Vue JS v-model                        </a>
                        <hr>
                                            <a href="/question/vue-js-3-event-bus" class="">
                            Vue.js 3 Event Bus                        </a>
                        <hr>
                                            <a href="/question/laravel-echo-n-39-eacute-coute-pas" class="">
                            Laravel Echo n'écoute pas                        </a>
                        <hr>
                                    </div>
                <div class="">
                    <ins class="adsbygoogle"
                         style="display:block"
                         data-ad-client="ca-pub-5975820494937925"
                         data-ad-slot="4267220326"
                         data-ad-format="auto"
                         data-full-width-responsive="true"></ins>
                    <script>
                         (adsbygoogle = window.adsbygoogle || []).push({});
                    </script>
                </div>
            </div>
        </div>
    </div>

            <script  type="text/javascript"  src="/js/purecookie.js"></script>        </div>

        <div class="container col-lg-8 col-md-12 ads-footer">
            <ins class="adsbygoogle"
                 style="display:block"
                 data-ad-client="ca-pub-5975820494937925"
                 data-ad-slot="5580301997"
                 data-ad-format="auto"
                 data-full-width-responsive="true"></ins>
            <script>
                 (adsbygoogle = window.adsbygoogle || []).push({});
            </script>
        </div>

    </body>
    <footer>
        <div class="row col-lg-12 col-md-12 text-muted">
            © 2020 www.devfaq.fr - Licensed under <a href="https://creativecommons.org/licenses/by-sa/3.0/" rel="license"> cc by-sa 3.0 </a>  with <a href="https://stackoverflow.blog/2009/06/25/attribution-required/" rel="license"> attribution required</a>.
        </div>
    </footer>




</html>