i'm new with vue.js. i have two different vue.js file
this is the first file:
<template>
<SecondFile />
</template>
<script>
import SecondFile from SecondFile.vue
export default {
name: 'FirstFile',
component : { SecondFile },
};
</script>
this first vue file contains a value with variable profile.status which bring the value (active / inactive ) and i wanna pass it to second vue file.
this is the second file:
<template>
<a-dropdown class="action-bar">
<a class="action-dropdown" href="#"> ACTION <a-icon type="down" /> </a>
<a-menu slot="overlay">
<a-menu-item>
EXPORT PDF
</a-menu-item>
<a-menu-item>
{{ profile.status }}
</a-menu-item>
<a-menu-item>
DELETE
</a-menu-item>
</a-menu>
</a-dropdown>
</template>
<script>
export default {
name: 'SecondFile',
};
</script>
the profile.status value does not appear in the second file. how can i pass the value of profile.status? anyone can help me??
There are few way to communicate between Vue components, one of them is using Props.
steps:
add props property in the second file:
export default {
name: 'SecondFile',
props: {
profile: Object
}
};
edit first file:
<template>
<SecondFile :profile="profile"/>
</template>
see:Passing Data to Child Components with Props
Related
I've multiple (20+) pages where I need the following code:
<template>
<template v-if="isLoading">
<Spinner full size="medium" />
</template>
<template v-else>
<p>Page data</p>
</template>
</template>
<script>
export default {
computed: {
isLoading() {
return this.$store.getters['loader/isLoading'];
},
},
};
</script>
I don't want to rewrite this part everytime I need it so is there a way to create something like a higher order component with access to the computed method and a way to add the hoc to the script tag of the different vue files? Or another way to archive this?
I could recommend extending the spinner component where you want to show the spinner. I've created a boilerplate setup that show a very simple implementation of this approach here.
The main idea is to expose a default slot for you spinner component, and wrap the page component in that slot.
<template>
<div>
<Spinner v-if="isLoading" full size="medium" />
<!-- Slot for component data -->
<slot v-else></slot>
</div>
</template>
<script>
export default {
computed: {
isLoading() {
return this.$store.getters['loader/isLoading'];
},
},
};
</script>
Then in any component that you want to show the spinner:
<template>
<spinner>
<!-- Pass here the component content to be shown after the spinner is hidden -->
</spinner>
</template>
<script>
import Spinner from "./spinner";
export default {
name: "Page1",
extends: Spinner,
components: { Spinner }
};
</script>
I use vue(2.6.10) an Im trying to build a universal table with vuetable2 (2.0.0-beta.4).
I created a component for the general methods of vuetable.
I tried to place my "MyCustomTemplate" in the slot section of the "MyVueTable", but I got no error and nothing is shown.
My goal is to use the "MyVueTable" in other vue pages and replace the "MyCustomTemplate".
I have currently 3 entries in my data but in the List.vue component nothing is shown
List.vue
<template>
<MyVueTable :data="data" :fields="fields">
<MyCustomTemplate v-slot="vueTableTemplateSlot"/>
</MyVueTable>
</template
<script>
export default {
name:"List",
data(){
return{
data: [],
fields: [
{
name: 'vueTableTemplateSlot'
}
]
};
}
}
</script>
MyVueTable.vue
<template>
<vuetable ref="vuetable">
<slot name="vueTableTemplateSlot" slot-scope="props"/>
</vuetable>
</template>
<script>
export default {
name: 'MyVueTable',
props: ['data', 'fields'],
methods:{
//vuetable methods
}
}
</script>
MyCustomTemplate.vue
<template>
<div>
{{rowData.id}}
</div>
</template>
<script>
export default {
name: 'MyCustomTemplate',
data(){
return{
rowData: null
}
}
</script>
You can test to put your component(in List.vue) in a div or a template that will be the slot content :
<template #nameOfYourSlot>
<NameOfYourComponent>
</template>
This was answered in the official repository, you need to do this to be your custom global component: https://github.com/ratiw/vuetable-2-tutorial/wiki/lesson-17
I'm trying to access the root element a component with this.$children.$el, however, I'm getting undefined in the console. I can see the $el property on the object when I console.log(this.$children), so I'm not quite sure where I'm going wrong, any help would be greatly appreciated.
<template>
<div>
<Project
v-for="project in projects"
:key="project.sys.id"
:title="project.fields.title"
:images="project.fields.images"
/>
</div>
</template>
<script>
import Project from '~/components/Project'
export default {
mounted() {
const projects = this.$children.$el
},
components: {
Project
}
}
</script>
As stated in the vue.js documentation this.$children returns an array of children components. You could see your child component by printing this.$children[0] and its root element by priting this.$children[0].$el.
If you have many children components and want to target a specific one, you can tag your component with a ref attribute like below :
<template>
<div>
<Project
v-for="project in projects"
:key="project.sys.id"
:title="project.fields.title"
:images="project.fields.images"
ref="project"
/>
</div>
</template>
<script>
import Project from '~/components/Project'
export default {
mounted() {
console.log(this.$refs.project)
},
components: {
Project
}
}
</script>
I'm facing an issue with my first Vue Project. I already googled for a while but can't find something very usefull.
I simply try to create a parent ("Files") and a child component ("Filelist") and use the Filelist in Files. This is not working as expected. I can't see the mistake, beacause i already added
export default {
name: 'Filelist',
The only hint I can get is from the browser console
[Vue warn]: Unknown custom element: <Filelist> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <Files> at src/docs/categories/Files.vue
<App> at src/App.vue
<Root>
and
./src/App.vue (./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue) 42:14-22"
export 'Filelist' was not found in '#/components/Filelist'
Thanks a lot in advance
The code of Files:
<template>
<div class="">
<h1>Hedajo</h1>
<Filelist :msg="sometext"/>
{{ sometext }}
</div>
</template>
<script>
import { Filelist } from "#/components/Filelist.vue";
export default {
name: "Files",
components: {
Filelist
},
data() {
return {
sometext: "hejo",
};
},
methods: {
}
};
</script>
<style scoped>
</style>
The code of Filelist:
<template>
<component class="">
{{ msg }}
<p>hewhwe</p>
{{ hedadi }}
{{ testi }}
</component>
</template>
<script>
export default {
name: 'Filelist',
props: ["msg"],
data () {
return {
testi: "hedadi",
};
}
};
</script>
<style scoped>
</style>
It's a default export, so you don't need to extract it. Try
import Filelist from "#/components/Filelist.vue";
You will need to register FileList as a component before using it.
<template>
<div class="">
<h1>Hedajo</h1>
<Filelist :msg="sometext"/>
{{ sometext }}
</div>
</template>
<script>
import Vue from 'vue';
Vue.component('Filelist', require('#/components/Filelist.vue').default);
....
You dont need the import Filelist statement in this case
How to pass all props dynamically to child component? As an example consider a case:
// wrapper around a component my-wrapper.vue
<template>
<div>
<third-party-component />
</div>
</template>
third-party-component is a component which can accept number of attributes like value, disabled, clicked, etc. How I can use my-wrapper in way that whatever I passed as props to it it will be transferred to third-party-component like
<my-wrapper :value="myVal" :disabled="field.isDisabled" />
By default the attributes you add on to my-wrapper will be bound to the root element which is div. To avoid this set inheritAttrs option to false
Then you can bind all the attributes to using v-bind="$attrs" where $attrs contains parent-scope attribute bindings (except for class and style)
// wrapper around a component my-wrapper.vue
<template>
<div>
<third-party-component v-bind="$attrs"/>
</div>
</template>
<script>
export default{
inheritAttrs: false
}
</script>
I would set identical props to the wappers and use them in the template ...
But there is many ways, it easy to speak from parent to childs.
https://en.vuejs.org/v2/guide/components-props.html#Passing-Static-or-Dynamic-Props
https://v1.vuejs.org/guide/syntax.html#Shorthands
---- MyWrapper.vue
<template>
<div>
<third-party-component :value="value" :disabled="disabled" />
</div>
</template>
<script>
#import third-party-component from '../..? ./components/thirdPartyComponent.vue'
export default {
name: 'MyWrapper',
props: ['value', 'disabled'],
components: {
third-party-component // local component, you can use global
}
//... data, computed ...
}
</script>
----- MyAppli.vue
<template>
<my-wrapper :value="myVal" :disabled="field.isDisabled" />
</template>
<script>
import my-wrapper from '../..? ../components/MyWrapper.vue'
export default {
name: 'MyApp',
components: {
my-wrapper // local component, you can use global
} ....