v-on:change.native doesn't bind in the parent component: Vue.js

Multi tool use
Multi tool use












0















I have a component with checkbox input:



<template>
<input id='one' type='checkbox' v-on:change.native="$emit('change')" />
</template>


I am using this component in another component:



<template>
....
<Checkbox v-on:change="change" />
....
</template>
<script>
import Checkbox from './components/Checkbox.vue'

export default {
components: {
Checkbox
},
methods: {
change: function (e) {
console.log(e);
},
}
</script>


What I want is to attach parent component method, which must point to children component event.
The problem is that this change event doesn't trigger when checkbox is changed.










share|improve this question



























    0















    I have a component with checkbox input:



    <template>
    <input id='one' type='checkbox' v-on:change.native="$emit('change')" />
    </template>


    I am using this component in another component:



    <template>
    ....
    <Checkbox v-on:change="change" />
    ....
    </template>
    <script>
    import Checkbox from './components/Checkbox.vue'

    export default {
    components: {
    Checkbox
    },
    methods: {
    change: function (e) {
    console.log(e);
    },
    }
    </script>


    What I want is to attach parent component method, which must point to children component event.
    The problem is that this change event doesn't trigger when checkbox is changed.










    share|improve this question

























      0












      0








      0








      I have a component with checkbox input:



      <template>
      <input id='one' type='checkbox' v-on:change.native="$emit('change')" />
      </template>


      I am using this component in another component:



      <template>
      ....
      <Checkbox v-on:change="change" />
      ....
      </template>
      <script>
      import Checkbox from './components/Checkbox.vue'

      export default {
      components: {
      Checkbox
      },
      methods: {
      change: function (e) {
      console.log(e);
      },
      }
      </script>


      What I want is to attach parent component method, which must point to children component event.
      The problem is that this change event doesn't trigger when checkbox is changed.










      share|improve this question














      I have a component with checkbox input:



      <template>
      <input id='one' type='checkbox' v-on:change.native="$emit('change')" />
      </template>


      I am using this component in another component:



      <template>
      ....
      <Checkbox v-on:change="change" />
      ....
      </template>
      <script>
      import Checkbox from './components/Checkbox.vue'

      export default {
      components: {
      Checkbox
      },
      methods: {
      change: function (e) {
      console.log(e);
      },
      }
      </script>


      What I want is to attach parent component method, which must point to children component event.
      The problem is that this change event doesn't trigger when checkbox is changed.







      javascript vue.js vuejs2 vue-component






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Dec 30 '18 at 20:28









      gdfgdfggdfgdfg

      667923




      667923
























          2 Answers
          2






          active

          oldest

          votes


















          1














          You need to use the input event for checkboxes. I'd also recommend using v-on="$listeners" in the Checkbox component unless you really need to name the event 'change'.



          Checkbox.vue



          <template>
          <input
          type="checkbox"
          v-on="$listeners"
          >
          </template>


          index.vue



          <template>
          <Checkbox @input="input" />
          </template>

          <script>
          import Checkbox from '~/components/Checkbox.vue';

          export default {
          components: {
          Checkbox,
          },
          methods: {
          input(e) {
          console.log(e);
          },
          },
          };
          </script>





          share|improve this answer































            1














            The .native modifier is used on components, not on native widgets.




            There may be times when you want to listen directly to a native event
            on the root element of a component. In these cases, you can use the
            .native modifier for v-on




            You could use .native in the outer binding to catch the change event bubbling from the inside (because native events generally bubble, while Vue events do not), or you could use non-.native events in both the inner and outer components to do your own bubbling.



            The snippet below does both:






            new Vue({
            el: '#app',
            methods: {
            change() {
            console.log("Native change");
            },
            change2() {
            console.log("Non-native");
            }
            },
            components: {
            myCheckbox: {
            template: '#inner-template'
            }
            }
            });

            <script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
            <template id="inner-template">
            <input id='one' type='checkbox' v-on:change="$emit('change')" />
            </template>
            <div id="app">
            <my-checkbox v-on:change.native="change" @change="change2"></my-checkbox>
            </div>








            share|improve this answer























              Your Answer






              StackExchange.ifUsing("editor", function () {
              StackExchange.using("externalEditor", function () {
              StackExchange.using("snippets", function () {
              StackExchange.snippets.init();
              });
              });
              }, "code-snippets");

              StackExchange.ready(function() {
              var channelOptions = {
              tags: "".split(" "),
              id: "1"
              };
              initTagRenderer("".split(" "), "".split(" "), channelOptions);

              StackExchange.using("externalEditor", function() {
              // Have to fire editor after snippets, if snippets enabled
              if (StackExchange.settings.snippets.snippetsEnabled) {
              StackExchange.using("snippets", function() {
              createEditor();
              });
              }
              else {
              createEditor();
              }
              });

              function createEditor() {
              StackExchange.prepareEditor({
              heartbeatType: 'answer',
              autoActivateHeartbeat: false,
              convertImagesToLinks: true,
              noModals: true,
              showLowRepImageUploadWarning: true,
              reputationToPostImages: 10,
              bindNavPrevention: true,
              postfix: "",
              imageUploader: {
              brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
              contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
              allowUrls: true
              },
              onDemand: true,
              discardSelector: ".discard-answer"
              ,immediatelyShowMarkdownHelp:true
              });


              }
              });














              draft saved

              draft discarded


















              StackExchange.ready(
              function () {
              StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53981181%2fv-onchange-native-doesnt-bind-in-the-parent-component-vue-js%23new-answer', 'question_page');
              }
              );

              Post as a guest















              Required, but never shown

























              2 Answers
              2






              active

              oldest

              votes








              2 Answers
              2






              active

              oldest

              votes









              active

              oldest

              votes






              active

              oldest

              votes









              1














              You need to use the input event for checkboxes. I'd also recommend using v-on="$listeners" in the Checkbox component unless you really need to name the event 'change'.



              Checkbox.vue



              <template>
              <input
              type="checkbox"
              v-on="$listeners"
              >
              </template>


              index.vue



              <template>
              <Checkbox @input="input" />
              </template>

              <script>
              import Checkbox from '~/components/Checkbox.vue';

              export default {
              components: {
              Checkbox,
              },
              methods: {
              input(e) {
              console.log(e);
              },
              },
              };
              </script>





              share|improve this answer




























                1














                You need to use the input event for checkboxes. I'd also recommend using v-on="$listeners" in the Checkbox component unless you really need to name the event 'change'.



                Checkbox.vue



                <template>
                <input
                type="checkbox"
                v-on="$listeners"
                >
                </template>


                index.vue



                <template>
                <Checkbox @input="input" />
                </template>

                <script>
                import Checkbox from '~/components/Checkbox.vue';

                export default {
                components: {
                Checkbox,
                },
                methods: {
                input(e) {
                console.log(e);
                },
                },
                };
                </script>





                share|improve this answer


























                  1












                  1








                  1







                  You need to use the input event for checkboxes. I'd also recommend using v-on="$listeners" in the Checkbox component unless you really need to name the event 'change'.



                  Checkbox.vue



                  <template>
                  <input
                  type="checkbox"
                  v-on="$listeners"
                  >
                  </template>


                  index.vue



                  <template>
                  <Checkbox @input="input" />
                  </template>

                  <script>
                  import Checkbox from '~/components/Checkbox.vue';

                  export default {
                  components: {
                  Checkbox,
                  },
                  methods: {
                  input(e) {
                  console.log(e);
                  },
                  },
                  };
                  </script>





                  share|improve this answer













                  You need to use the input event for checkboxes. I'd also recommend using v-on="$listeners" in the Checkbox component unless you really need to name the event 'change'.



                  Checkbox.vue



                  <template>
                  <input
                  type="checkbox"
                  v-on="$listeners"
                  >
                  </template>


                  index.vue



                  <template>
                  <Checkbox @input="input" />
                  </template>

                  <script>
                  import Checkbox from '~/components/Checkbox.vue';

                  export default {
                  components: {
                  Checkbox,
                  },
                  methods: {
                  input(e) {
                  console.log(e);
                  },
                  },
                  };
                  </script>






                  share|improve this answer












                  share|improve this answer



                  share|improve this answer










                  answered Dec 30 '18 at 20:44









                  David WeldonDavid Weldon

                  51.5k7119125




                  51.5k7119125

























                      1














                      The .native modifier is used on components, not on native widgets.




                      There may be times when you want to listen directly to a native event
                      on the root element of a component. In these cases, you can use the
                      .native modifier for v-on




                      You could use .native in the outer binding to catch the change event bubbling from the inside (because native events generally bubble, while Vue events do not), or you could use non-.native events in both the inner and outer components to do your own bubbling.



                      The snippet below does both:






                      new Vue({
                      el: '#app',
                      methods: {
                      change() {
                      console.log("Native change");
                      },
                      change2() {
                      console.log("Non-native");
                      }
                      },
                      components: {
                      myCheckbox: {
                      template: '#inner-template'
                      }
                      }
                      });

                      <script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
                      <template id="inner-template">
                      <input id='one' type='checkbox' v-on:change="$emit('change')" />
                      </template>
                      <div id="app">
                      <my-checkbox v-on:change.native="change" @change="change2"></my-checkbox>
                      </div>








                      share|improve this answer




























                        1














                        The .native modifier is used on components, not on native widgets.




                        There may be times when you want to listen directly to a native event
                        on the root element of a component. In these cases, you can use the
                        .native modifier for v-on




                        You could use .native in the outer binding to catch the change event bubbling from the inside (because native events generally bubble, while Vue events do not), or you could use non-.native events in both the inner and outer components to do your own bubbling.



                        The snippet below does both:






                        new Vue({
                        el: '#app',
                        methods: {
                        change() {
                        console.log("Native change");
                        },
                        change2() {
                        console.log("Non-native");
                        }
                        },
                        components: {
                        myCheckbox: {
                        template: '#inner-template'
                        }
                        }
                        });

                        <script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
                        <template id="inner-template">
                        <input id='one' type='checkbox' v-on:change="$emit('change')" />
                        </template>
                        <div id="app">
                        <my-checkbox v-on:change.native="change" @change="change2"></my-checkbox>
                        </div>








                        share|improve this answer


























                          1












                          1








                          1







                          The .native modifier is used on components, not on native widgets.




                          There may be times when you want to listen directly to a native event
                          on the root element of a component. In these cases, you can use the
                          .native modifier for v-on




                          You could use .native in the outer binding to catch the change event bubbling from the inside (because native events generally bubble, while Vue events do not), or you could use non-.native events in both the inner and outer components to do your own bubbling.



                          The snippet below does both:






                          new Vue({
                          el: '#app',
                          methods: {
                          change() {
                          console.log("Native change");
                          },
                          change2() {
                          console.log("Non-native");
                          }
                          },
                          components: {
                          myCheckbox: {
                          template: '#inner-template'
                          }
                          }
                          });

                          <script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
                          <template id="inner-template">
                          <input id='one' type='checkbox' v-on:change="$emit('change')" />
                          </template>
                          <div id="app">
                          <my-checkbox v-on:change.native="change" @change="change2"></my-checkbox>
                          </div>








                          share|improve this answer













                          The .native modifier is used on components, not on native widgets.




                          There may be times when you want to listen directly to a native event
                          on the root element of a component. In these cases, you can use the
                          .native modifier for v-on




                          You could use .native in the outer binding to catch the change event bubbling from the inside (because native events generally bubble, while Vue events do not), or you could use non-.native events in both the inner and outer components to do your own bubbling.



                          The snippet below does both:






                          new Vue({
                          el: '#app',
                          methods: {
                          change() {
                          console.log("Native change");
                          },
                          change2() {
                          console.log("Non-native");
                          }
                          },
                          components: {
                          myCheckbox: {
                          template: '#inner-template'
                          }
                          }
                          });

                          <script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
                          <template id="inner-template">
                          <input id='one' type='checkbox' v-on:change="$emit('change')" />
                          </template>
                          <div id="app">
                          <my-checkbox v-on:change.native="change" @change="change2"></my-checkbox>
                          </div>








                          new Vue({
                          el: '#app',
                          methods: {
                          change() {
                          console.log("Native change");
                          },
                          change2() {
                          console.log("Non-native");
                          }
                          },
                          components: {
                          myCheckbox: {
                          template: '#inner-template'
                          }
                          }
                          });

                          <script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
                          <template id="inner-template">
                          <input id='one' type='checkbox' v-on:change="$emit('change')" />
                          </template>
                          <div id="app">
                          <my-checkbox v-on:change.native="change" @change="change2"></my-checkbox>
                          </div>





                          new Vue({
                          el: '#app',
                          methods: {
                          change() {
                          console.log("Native change");
                          },
                          change2() {
                          console.log("Non-native");
                          }
                          },
                          components: {
                          myCheckbox: {
                          template: '#inner-template'
                          }
                          }
                          });

                          <script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
                          <template id="inner-template">
                          <input id='one' type='checkbox' v-on:change="$emit('change')" />
                          </template>
                          <div id="app">
                          <my-checkbox v-on:change.native="change" @change="change2"></my-checkbox>
                          </div>






                          share|improve this answer












                          share|improve this answer



                          share|improve this answer










                          answered Dec 30 '18 at 20:56









                          Roy JRoy J

                          26.6k33158




                          26.6k33158






























                              draft saved

                              draft discarded




















































                              Thanks for contributing an answer to Stack Overflow!


                              • Please be sure to answer the question. Provide details and share your research!

                              But avoid



                              • Asking for help, clarification, or responding to other answers.

                              • Making statements based on opinion; back them up with references or personal experience.


                              To learn more, see our tips on writing great answers.




                              draft saved


                              draft discarded














                              StackExchange.ready(
                              function () {
                              StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53981181%2fv-onchange-native-doesnt-bind-in-the-parent-component-vue-js%23new-answer', 'question_page');
                              }
                              );

                              Post as a guest















                              Required, but never shown





















































                              Required, but never shown














                              Required, but never shown












                              Required, but never shown







                              Required, but never shown

































                              Required, but never shown














                              Required, but never shown












                              Required, but never shown







                              Required, but never shown







                              TndLt,d tL Yfg2F,MRhCeIrO6w,USqoN,NNPK 0MySC PDPv,DHoWL2UpFMICeP7r,gW4 a7VUUHlivM9MF3eOEYx8h1kggQ,W
                              4ClwMMEYF Le6Os3zbl8FyLQChJuTmXTKWiSbuzOjqoZyRilHisagXyUnimyUP dU,lyPqM8nXsvK1gr3S6fqhi

                              Popular posts from this blog

                              Monofisismo

                              Angular Downloading a file using contenturl with Basic Authentication

                              Olmecas