vue-component

I have component and i want run method after click <my-component @click="showOtherDiv"></my-component> i have this method on main app methods var app = new Vue({ el: '#app', data: {}, methods: { showOtherDiv : function(){ alert('Some message'); } } }); but seems like "click" not works on full component Register your component, and declare the handler method inside: Vue.component('my-component', { // ... methods: { showOtherDiv : function(){ alert('Some message'); } } }); Add the .native modifier to the event name: <my-component @click.native="showOtherDiv"></my-component> From the docs :

Codepen.io: https://codepen.io/xblack/pen/jXQeWv?editors=1010 HTML part : <div id="app"> <ul> <child-one :one="mydata"></child-one> <child-two :mydataTwo="mydata"></child-two> </ul> </div> <!-- child one template --> <script type="text/x-template" id="child-one"> <ul> LIST ONE <li v-for="item,i in one"> {{i}} {{item.name}} {{item.username.name}} {{item.email}} </li> </ul> </script> <!-- child two template --> <script type="text/x-template" id="child-two"> <ul> LIST TWO <li v-for="item,i in mydataTwo"> {{i}} {{item.name}} {{item.username.name}} {{item.email}} </li> </ul> </script> JS part : Vue

I have a Vue component with an <input> element that binds the v-on:keyup.enter key to doFilter() a <button> that binds the v-on:click event to doFilter() <input type="text" v-model="myVar" @keyup.enter="doFilter" /> <button @click="doFilter">Filter</button> The button event will fire doFilter() , but the key up event will not fire, unless I add the .native modifier. <input type="text" v-model="myVar" @keyup.native.enter="doFilter" /> The Vue.js documentation says this about .native : listen for a native event on the root element of component. When do I need to use .native and why does the

I have a component and i am passing value 543 to props :prop-room-selected, <navigation-form :prop-room-selected='543'> </navigation-form> Now, From a button click, i am calling the function updateCoachStatus to change the value of propRoomSelected, but the props value is not updating. { template: '#navigation-form', props: ['propRoomSelected'], data: function () { return { roomSelected: this.propRoomSelected, } }, methods:{ updateCoachStatus: function(event){ this.propRoomSelected = 67; } } } I dont know how to change the value of props from function. Is it possible in Vue to update the value

I have a Vue component that's kept alive using Vue's element for caching purposes. However, the problem I am having right now is that once I sign out of one account and create a new account on my Vue application, the component I'm "keeping alive" is being reflected for the new user (which obviously isn't relevant for the new user). As a result, I want to destroy that component once the user signs out. What is the best way to go about this? I've managed to solve my issue in the following way. Essentially, if the user is logged in, keep the dashboard alive. Else, don't keep the dashboard alive.

When using dynamic component in vue, we could use component or html tag such as div as the tag name: <component :is="comp-name"></component> or: // assume that the root tag of comp-name is div <div :is="comp-name"></div> So what's the difference between the 2 ways? Are the same? The " is " attribute is not Vue specific, it comes from the Custom Element spec. See also What is HTML "is" attribute? But obviously Vue has to implement it on its own for its compilation, mimicking the Custom Element spec. In the example you show, I guess it will not matter, as in both cases the tag ( <component> or