vue-component

I'm creating a small timer Vue component. A user needs to be able to start and stop that timer. Here's my component thus far: <template> <div> <a class="u-link-white" href="#" @click="toggleTimer"> {{ time }} </a> </div> </template> <script> export default { props: ['order'], data() { return { time: this.order.time_to_complete, isRunning: false, } }, methods: { toggleTimer() { var interval = setInterval(this.incrementTime, 1000); if (this.isRunning) { //debugger clearInterval(interval); console.log('timer stops'); } else { console.log('timer starts'); } this.isRunning = (this.isRunning ? false

I was trying to animated two divs using transition in Vuejs. Below is the code (jsfiddle) that I've used. But don't know why it's not working https://jsfiddle.net/k6grqLh1/16/ vue <div id="vue-instance"> <div> <transition name="fade"> <div v-show="show"> <div class="box yellow"></div> </div> </transition> <transition name="fade"> <div v-show="!show"> <div class="box blue"></div> </div> </transition> <a href="#" @click="show = !show">Change</a> </div> </div> css .fade-enter-active, .fade-leave-active { transition: opacity .5s } .fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {

I'm new to VueJS. I'm trying to create a form with simple Save and Cancel functionality. When binding the model to form fields they get updated immediately as the inputs are changed, but I don't want that tight binding. Instead, I want to be able to save and submit when the "Save" button is pressed and revert the changes when the "Cancel" button is pressed. What's the suggested Vue way of doing this? It would also be ideal if we can show the server save status and indicate it on the form if the submission is failed. If you know of any examples or samples that would be hugely helpful. Thanks!

How can I use a computed property in the data or emit it via bus? I have the following vue instance, but myComputed is always undefined but computedData is working correctly. var vm = new Vue({ data(){ return{ myComputed: this.computedData } }, computed: { computedData(){ return 'Hello World' } } }) To make things as simple as possible, just do the work in watcher, unless you want to emit the changes to different components or there're a lot of variables you want to notify, then you may have to use Vuex or the event bus: var vm = new Vue({ data(){ return{ myComputed: '', computedData: 'Hello

Im finding a solution to async computed method in Components: Currently, my components is: <div class="msg_content"> {{messages}} </div> <script> export default { computed: { messages: { get () { return api.get(`/users/${this.value.username}/message/`, {'headers': { 'Authorization': 'JWT ...' }}) .then(response => response.data) } } }, } </script> Result: {} How to rewrite it in Promise mode? Because I think we can async computed by writing into Promise mode. Roy J Computed properties are basically functions that cache their results so that they don't have to be calculated every time they are