vue-component

Vue $route is not defined

由 萝らか妹 提交于 2019-11-30 14:28:49
问题 I'm learning Vue router. And I want to made programmatic navigation (without <router-link> ). My router and view: router = new VueRouter({ routes: [ {path : '/videos', name: 'allVideos', component: Videos }, {path : '/videos/:id/edit', name: 'editVideo', component: VideoEdit }, ] }); new Vue({ el: "#app", router, created: function(){ if(!localStorage.hasOwnProperty('auth_token')) { window.location.replace('/account/login'); } router.push({ name: 'allVideos' }) } }) So by default I push to

how to use setInterval in vue component

由 偶尔善良 提交于 2019-11-30 12:30:45
问题 I define the timer in each my-progress, used to update the value of view, but the console shows the value of the constant changes, and the value of view is still not changed, how can I do in the timer to change the value of view Vue.component('my-progress', { template: '\ <div class="progress progress-bar-vertical" data-toggle="tooltip" data-placement="top">\ <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" :style="{height: pgvalue}">{

Compile .vue file into .js file without webpack or browserify

由 可紊 提交于 2019-11-30 11:59:25
Is there any way to compile .vue file into .js file without webpack or browserify? I know the goodness of webpack or browserify but I just want the simplest way to compile the .vue file. For example, I have a single file component comp.vue complied into comp.js (the compiler should be able to compile sass and pug in .vue file) and then I can use it in my app like below: <head> <script src="vue.min.js"></script> <script src="comp.js"></script> //it may pack the whole component into variable comp and add the style <script> Vue.component('comp', comp); window.onload = function() { new Vue({el: '

how to create a 404 component in vuejs using vue-router

由 独自空忆成欢 提交于 2019-11-30 11:57:14
问题 I'm new to vuejs and I'm working on my first project with vue. I'm just wondering how I will route to my 404.vue component when the requested url is not found. Any Idea? 回答1: In the routes declaration, I like to add this: [ ... { path: '/404', component: NotFound }, { path: '*', redirect: '/404' }, ... ] Which will imply that if the user is navigated to a path which does not match any routes, it will be redirected to the "404" route, which will contain the "not found" message. The reason I've

Vue.js Changing props

由 柔情痞子 提交于 2019-11-30 11:00:32
I'm a bit confused about how to change properties inside components, let's say I have the following component: { props: { visible: { type: Boolean, default: true } }, methods: { hide() { this.visible = false; } } } Although it works, it would give the following warning: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "visible" (found in component ) Now I'm wondering what the best way to handle this is, obviously the visible property is passed in

vue.js: what's the difference between <component :is=“comp-name”/> and <div :is=“comp-name”/>?

由 烂漫一生 提交于 2019-11-30 09:02:25
问题 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? 回答1: 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

VueJS 2 - How to Pass Parameters Using $emit

由 倖福魔咒の 提交于 2019-11-30 08:20:58
I am working on a modal component using VueJS 2. Right now, it basically works -- I click on a button and the modal opens, etc. What I want to do now is create a unique name for the modal and associate the button with that particular button. This is what I have in mind. The modal has a unique name property: <modal name='myName'>CONTENT</modal> And this would be the associate button: <button @click="showModal('myName')"></button> What I need to figure out is how to pass the parameter of showModal to the modal component. Here is the method that I'm using in the root vue instance (i.e, NOT inside

How to create Vue.js slot programmatically?

由 风流意气都作罢 提交于 2019-11-30 08:02:11
问题 I have the following component with a slot: <template> <div> <h2>{{ someProp }}</h2> <slot></slot> </div> </template> For some reasons, I have to manually instantiate this component. This is how I am doing it: const Constr = Vue.extend(MyComponent); const instance = new Constr({ propsData: { someProp: 'My Heading' } }).$mount(body); The problem is: I am not able to create slot contents programmatically. So far, I can create simple string based slot: const Constr = Vue.extend(MyComponent);

vuejs radio button component

由 霸气de小男生 提交于 2019-11-30 06:48:12
问题 I trying to make this custom radio button component to work in vuejs. How do I make the radio button checked with a value from parent component. I know you use v-model and set it to a same value in one of the input values, but it dont seem to get it work. component: export default Vue.component('radioButton', { template, props: ['name', 'label', 'id', 'value'] }) component template: <label class="radio" :for="id"> <input type="radio" :id="id" class="radio-button" :value="value" :name="name">

Proper way to re-initialize the data in VueJs 2.0

由 浪子不回头ぞ 提交于 2019-11-30 06:22:59
问题 I was going through this answer on SO : Is there a proper way of resetting a component's initial data in vuejs? However, the current method is not allowed now and VueJS prohibits changing the $data var. As you can see here in this https://github.com/vuejs/vue/issues/2873 ( $data is not allowed to be modified. ) So if I try the above method, I am getting a VueJS warning: [Vue warn]: Avoid replacing instance root $data. Use nested data properties instead. Here is my JS code, function
订阅 vue-component