vue-component | 易学教程

Vue.js: How to fire a watcher function when a component initializes

阅读更多关于 Vue.js: How to fire a watcher function when a component initializes

问题 Sometimes I need to call some function in response to a change in a data property. But, I also need that function to fire for the initial value of the data property. The watcher does not fire when the component initializes since the property being watched technically hasn't changed yet. So, I end up putting the function in the methods object, and then calling that method in the watcher and the mounted hook. Here's an example: new Vue({ el: '#app', data() { return { selectedIndex: 0, } },

VueJS: @click.native.stop = “” possible?

阅读更多关于 VueJS: @click.native.stop = “” possible?

I have several nested components on the page with parents component having @click.native implementation. Therefore when I click on the area occupied by a child component (living inside parent), both click actions executed (parent and all nested children) for example <products> <product-details> <slide-show> <media-manager> <modal-dialog> <product-details> <slide-show> <media-manager> <modal-dialog> </products> So I have a list of multiple products, and when I click on "canvas" belonging to modal dialog - I also get @click.native fired on product-details to which modal-dialog belongs. Would be

How to update a slot in Vue.JS

阅读更多关于 How to update a slot in Vue.JS

I have a Vue component simplified below. Here is the template <template> <slot></slot> </template> The slot may contain HTML, which is why I decided to use a slot rather than a prop which I would simply bind to. I'd like to keep it that way. I have a method that gets new HTML from the server. I'd like to use this new HTML to update the slot. I'm not sure if slots are reactive and how I can accomplish this. I can view the default slot using this.$slots.default[0] , but I don't know how to update it with a string of HTML content. Simply assigning the string to the element is obviously incorrect,

Vue @click.native not working?

阅读更多关于 Vue @click.native not working?

问题 I have navigation component like this: <template> <nav class="navbar navbar-default navbar-fixed-top"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="">Website Builder</a> </div> <div> <div class="collapse navbar-collapse" id="myNavbar"> <ul class="nav navbar-nav"> <li> <a href="#" @click

VueJS accessing externaly imported method in vue component

阅读更多关于 VueJS accessing externaly imported method in vue component

问题 I have an External Java Script File something.js function myFun(){ document.getElementById("demo").innerHTML="Hello World!"; } export default myFun; and this is my vue component Dashboard.vue <template> <div> <button type="button" name="button" @click="">Call External JS</button> <div id="demo"></div> </div> </template> <script> import something from "./something.js" export default { created(){ } } </script> I have two questions. First how do I call this method inside the created life cycle

Vue listen for Vuex commit?

阅读更多关于 Vue listen for Vuex commit?

Is there a way to listen to a Vuex commit without watching any of the properties that are changed with the commit? Just simply finding out if a commit has happened? I have a Filter component that I want to put into a NPM package but I already have a use case where I would want to set a cookie storing the filter preferences whenever a filter is selected. Obviously it is not the responsibility of the filter component to set cookies etc. and this is something that should be optional. I guess one way would be to use a global event bus but this would mean a user which uses my package would have to

Vue: method is not a function within inline-template component tag

阅读更多关于 Vue: method is not a function within inline-template component tag

I have this component: <template> <div class="modal fade modal-primary" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="ImageLabel" aria-hidden="true"> <div class="modal-dialog modal-lg animated zoomIn animated-3x"> <div class="modal-content"> <ais-index index-name="templates" app-id="BZF8JU37VR" api-key="33936dae4a732cde18cc6d77ba396b27"> <div class="modal-header"> <algolia-menu :attribute="category" :class-names="{ 'nav-item__item': 'nav-color', 'nav-item__link': 'nav-link', 'nav-item__item--active': 'active'}"> </algolia-menu> </div> <div class="modal-body"> <div class=

Smoothly animate v-show in VueJS

阅读更多关于 Smoothly animate v-show in VueJS

问题 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

Is there a way to route to html files with Vue router?

阅读更多关于 Is there a way to route to html files with Vue router?

Hello I am using VueJS and the webpack template. I have a bunch of components I can easily display with Vue Router. However, my organization uses Robot Framework for testing and we generate an HTML page using the command: python -m robot.testdoc /tests/directory /destination.html This is basically how I am using the router: import Vue from 'vue' import Router from 'vue-router' import Main from '@/components/Main.vue' import Component1 from '@/components/Component1.vue' import Component2 from '@/components/Component2.vue' Vue.use(Router) export default new Router({ routes: [ { path: '/', mode:

Vue.js disable component during ajax request

阅读更多关于 Vue.js disable component during ajax request

I'm looking for a simple solution for the following problem: I have a Vue component button with which I can make an ajax request. I would like to disable this button while the request is pending (to prevent multiple requests). Sounds like you want your action to set (commit) a flag when it starts and then clear it when it ends. Try something like this in Vuex... state: { loading: false }, mutations: { isLoading (state) { state.loading = true }, doneLoading (state) { state.loading = false } }, actions: { doAjaxRequest ({ commit }) { commit('isLoading') return doSomeAjaxRequest().then(res => { /