vue-component | 易学教程

Component `mounted` fires twice on page load

阅读更多关于 Component `mounted` fires twice on page load

I have a very weird error where on page load a components mounted and beforeMount fire/run twice? Each of my components represents a page, so when I load the page on mywebsite.com/contact the Contact.vue functions mounted and beforeMount fire/run twice but if I load the page on mywebsite.com/foo the Contact.vue functions mounted and beforeMount fire/run once (which is what I think? should happen). Any idea why these functions would execute twice? I have a bit of finicky setup but it work nicely for dynamic templates. router/index.js : const router = new Router({ routes: [ { path: (window

Can you render VNodes in a Vue template?

阅读更多关于 Can you render VNodes in a Vue template?

问题 I have an situation where I have a render function that passes some data to a scoped slot. As part of this data I'd like to include some VNodes constructed by the render function that could optionally be used by the scoped slot. Is there anyway when writing the scoped slot in a template to output the raw VNodes that were received? 回答1: You can use a functional component to render the vnodes for that section of your template: <some-component> <div slot-scope="{ vnodes }"> <vnodes :vnodes=

How to use VueJS 2 global components inside single file components?

阅读更多关于 How to use VueJS 2 global components inside single file components?

问题 I am trying to use a globally registered component (with Vue.component ) inside a single file component but I am always getting vue.common.js:2611[Vue warn]: Unknown custom element: <my-component> - did you register the component correctly? For example: main.js: ... Vue.component('my-component', { name: 'my-component', template: '<div>A custom component!</div>' }) ... home.vue: <template> <div> <my-component></my-component> </div> </template> <script> module.exports = { name: 'home' } <

Vue ignore custom component tag

阅读更多关于 Vue ignore custom component tag

On my site I am using Google CSE (custom search engine by google). Here is my HTML: <div id="app"> ... <gcse:search></gcse:search> ... </div> <script type="text/javascript"> new Vue({ el: '#app' }) </script> As you can see, I have a "gcse input" placed inside of my vue application. Therefore I am getting a warning: [Vue warn]: Unknown custom element: <gcse:search> So my question is how it possible to stop attempting to initialize this custom component in Vue.js? Thanks in advance. Vue thinks that you are trying to load a Vue component named gcse:search . In order to ignore this tag, add the v

Vue.js - Emit event from directive

阅读更多关于 Vue.js - Emit event from directive

问题 Is it possible to emit a custom event from the directive in the component to which this directive is attached. I was expecting it to work as described in example, but it does not. Example: //Basic Directive <script> Vue.directive('foo', { bind(el, binding, vnode) { setTimeout(() => { //vnode.context.$emit('bar'); <- this will trigger in parent vnode.$emit('bar'); }, 3000); } }); </script> //Basic Component <template> <button v-foo @bar="change">{{label}}</button> </template> <script> export

How to write test that mocks the $route object in vue components

阅读更多关于 How to write test that mocks the $route object in vue components

问题 I have a component that contains statement like this.$route.fullPath , how should I mock value of fullPath of $route object if I want to test that component? 回答1: Best not mock vue-router but rather use it to render the component, that way you get a proper working router. Example: import Vue from 'vue' import VueRouter from 'vue-router' import totest from 'src/components/totest' describe('totest.vue', () => { it('should totest renders stuff', done => { Vue.use(VueRouter) const router = new

Accessing nested child components in VueJS

阅读更多关于 Accessing nested child components in VueJS

Using v2.2.2. I have the following structure in my VueJS app. How can I access all of the Account components from a method on my Post component? The number of Accounts is dynamic - I want to grab all of the loaded Account components and iterate over them. I know it's got something to do with $refs and $children , I just can't seem to figure out the right path. <Root> <Post> <AccountSelector> <Account ref="anAccount"></Account> <Account ref="anAccount"></Account> <Account ref="anAccount"></Account> </AccountSelector> </Post> </Root> http://vuejs.org/v2/guide/components.html#Child-Component-Refs

Keep-alive on a single route instaead of all routes in router-view

阅读更多关于 Keep-alive on a single route instaead of all routes in router-view

if keep-alive is specified to router-view as below <keep-alive> <router-view></router-view> </keep-alive> then all routes are effectively cached and reloaded when that route is revisited. I'd like to be able to specify a keep-alive option on individual routes. With many routes and only 1 or 2 that need to be kept alive wihout re-rendering caching all routes is useless is there any method of doing so or any workaround available https://jsfiddle.net/Linusborg/L613xva0/4/ New in Vue version 2.1.0, the include and exclude props for conditionally caching components. Note the use of the name option.

Vue.js loading single-file components

阅读更多关于 Vue.js loading single-file components

问题 I'm new to Vue.js and want to use single-file components, but I don't understand the workflow. For example, I have three components: App , Grid and List App.vue <template> <div id="app"> <div id="grid"></div> <div id="right"></div> </div> </template> <script> export default { name: 'app', data () { return { message: 'Hello Vue!' } } } </script> Grid.vue <template> <div id="left"></div> </template> <script> export default { name: 'grid', data: function () { return { grid: 'some-data' } } } <

How to add dynamically attribute in VueJs

阅读更多关于 How to add dynamically attribute in VueJs

I'm using vuejs and I wanna know how to have control on inputs (add disabled attribute when necessary). Is there any way to add dynamically attribute in vuejs ? Below my Textfield component : <template> <input type="text" placeholder="{{ placeholder }}" v-model="value"> </template> <script> export default { props: { disabled: {type: Boolean, default: false}, placeholder: {type: String, default: ""}, value: {twoWay: true, default: ""} } } </script> Usage : <textfield placeholder="Name" value.sync="el.name" :disabled="true"></textfield> You can bind it to a variable using v-bind:disabled="foo"