I have to use a custom element in my project, and it used to work perfectly.
I am now changing the design of the project so I'm restarting it from zero, and now I can't use a custom component.
I haven't changed anything in the custom element itself.
Here is the code for hte page where i want to use the element:
<template >
<v-app>
<body>
<v-img id="background" :src="images.background"></v-img>
<v-img id="logo-transparent" :src="images.logoTransparent"></v-img>
<DraggableDiv class="dragdiv">
<template>
</template>
</DraggableDiv>
</body>
</v-app>
</template>
And here is the script part:
import DraggableDiv from '../components/DraggableDiv.vue'
export default {
name: 'CreationCouches',
data: () => ({
components: {
DraggableDiv,
Palette
}
})
Can you help me ?
In fact I was adding the component into the data() but it has to be outside of it:
import DraggableDiv from '../components/DraggableDiv.vue'
export default {
name: 'CreationCouches',
data: () => ({
//some data
}),
components: {
DraggableDiv,
Palette
}
}
Related
I am trying to include one component into another component, but I am getting the error "Failed to resolve component: applications-overview-table" in the browser console.
Parent component "src/pages/ApplicationsOverview.vue":
<template>
<q-page class="flex flex-center">
<applications-overview-table></applications-overview-table>
</q-page>
</template>
<script>
import ApplicationsOverviewTable from '../components/application/OverviewTable.vue';
export default {
name: 'ApplicationsOverviewPage',
components: [ApplicationsOverviewTable],
setup() {
console.log('loading applications overview');
return {};
},
};
</script>
<style></style>
Child component "src/applications/OverviewTable.vue":
<template>
<div class="q-pa-md">
<q-table title="Aanvragen" :rows="rows" :columns="columns" row-key="name" />
</div>
</template>
<script>
const columns = [ ... ];
const rows = [ ... ];
export default {
name: 'ApplicationsOverviewTable',
setup() {
return {
columns,
rows,
};
},
};
</script>
I can see that the parent component is being loaded, because the console message "loading applications overview" is being shown in the console.
I can also see that the path to OverviewTable.vue is correct, because if I change the path I get another error.
I tried to change <applications-overview-table> to <ApplicationsOverviewTable> but this gives me the same error (with the tag-name different of course).
It is right that I should change the CamelCase component name to dash-case in the templete, isn't it?
What am I doing wrong?
components option has an object as value not an array, it should be :
components: {ApplicationsOverviewTable},
this a shorthand of :
components: {
ApplicationsOverviewTable : ApplicationsOverviewTable
},
I'm new to Vue and I don't use Bootstrap often so please pardon my newbie question, I'm trying to create a Vue tooltip component, I've created one to behave the way I wanted using css, however, I'm running into some accessibility issues, so I decided to use the BootstrapVue tooltip instead, but I don't know how I would create this component with Bootstrap.
This is basically my Tooltip.vue component using css:
<template>
<div :class="`tooltip ${position}`">
<slot></slot>
<span class="tooltip-text">{{content}}</span>
</div>
</template>
<script>
export default {
name: 'Tooltip',
props: {
position: String,
content: String,
}
};
</script>
<style lang="scss">
.tooltip {
.......
</style>
Then I import and use my component in other places like this:
<tooltip position="right" content="Right tooltip">Hover me</tooltip>
And I have created a TooltipBootstrap.vue component wanting to have the same structure but using Bootstrap, but I don't know how that would go, here is what I started:
I npm installed bootstrap-vue
<template>
<div>
<button v-b-tooltip.hover.${position}="'${content}'"></button>
</div>
</template>
<script>
import VBTooltip from 'bootstrap-vue';
export default {
name: 'TooltipBootstrat',
components: {
VBTooltip,
},
props: {
position: String,
content: String,
}
};
</script>
I'm reading the bootstrap documentation: https://bootstrap-vue.org/docs/directives/tooltip, but I don't know if I'm using this the way it's supposed to be used, so I'm a little lost and would appreciate any help/advice, thanks!
BootstrapVue provide <b-tooltip> component and v-b-tooltip directive (preferred method from document). You can play around in the document.
In simple words, you can use v-b-tooltip directive on any element which is very convenient. but for <b-tooltip> component you have to set target to identify the target to active the tooltip.
So in your case you can do something like:
<template>
<div v-b-tooltip="{ title: content, placement: position }">
<slot></slot>
</div>
</template>
<script>
import { VBTooltip } from 'bootstrap-vue'
export default {
name: 'Tooltip',
directives: {
'b-tooltip': VBTooltip,
},
props: {
position: String,
content: String,
}
};
</script>
I'm trying to separate my project now into components to make the code readable when adjusting into a responsive app. The problem is passing the v-model from base-select -> child -> parent. How do I store the data selected to the Parent.vue items: ''? Here is my code below.
Parent.vue
<template>
<child></child>
</template>
<script>
import Child from './components/Child'
export default {
components: {
Child,
},
data: ()=> ({
item: ''
})
}
</script>
Child.vue
<template>
// Random HTML
// Random HTML 2
<base-select
:items="select"
>
</template>
<script>
import BaseSelect from '#/components/BaseSelect'
export default {
components: {
BaseSelect,
},
data: ()=> ({
select: ['Select 1', 'Select 2']
})
}
</script>
BaseSelect.vue
<template>
<v-select
v-bind="$attrs"
v-on="$listeners"
class="body-2"
solo
dense
clearable
/>
</template>
To implement v-model you need to add a value property to each child component. Each component will also need to emit an input event so that the parent component can pick up the change (read more here). Note that if you are passing data down through too many components, you should probably look at using Vuex however in this case it would probably still be fine.
Your components would have to look something like this to pass v-model all the way to the base component:
Parent.vue
<template>
<!-- Pass the data item below -->
<child v-model="item"></child>
</template>
<script>
import Child from './components/Child'
export default {
components: {
Child,
},
data: ()=> ({
item: ''
})
}
</script>
Child.vue
<template>
// Random HTML
// Random HTML 2
<base-select
:items="select"
value="value"
#input="e => $emit('input', e)"
>
</template>
<script>
import BaseSelect from '#/components/BaseSelect'
export default {
components: {
BaseSelect,
},
// We add the value prop below to work with v-model
props: {
value: String
},
data: ()=> ({
select: ['Select 1', 'Select 2']
}),
}
</script>
BaseSelect.vue
<template>
<v-select
v-bind="$attrs"
v-on="$listeners"
value="value"
#input="e => $emit('input', e)"
class="body-2"
solo
dense
clearable
/>
</template>
<script>
export default {
props: {
value: String
}
}
</script>
You can find a similar working example that I did here.
You need to use $emit (documentation) to passing data back to parent components. Or you can start using Vuex (state manager for Vue.js).
You also can check the live demo here.
For some reason it is not working, is this correct?
Parent Component:
<achievement-post imgURL="../assets/ach1.jpg"></achievement-post>
<script>
import achievementPost from "../components/AchievementPost.vue";
// ...
</script>
Child component:
<template>
<img :src="imgURL" />
</template>
<script>
export default {
props: {
imgURL: String
},
// ...
}
</script>
When I hardcode the URL it works, so I'm not sure what is going on. Please help.
If you are using Webpack, there is no way for it to track the image module dependency with a string url prop, so it will not try and resolve it.
The solution is to require it with an expression.
A context is created if your request contains expressions, so the
exact module is not known on compile time.
Child component:
<template>
<img :src="require(`../assets/${imgURL}`)" />
</template>
<script>
export default {
props: {
imgURL: String
},
// ...
}
</script>
Parent component
<achievement-post imgURL="ach1.jpg"></achievement-post>
<script>
import achievementPost from "../components/AchievementPost.vue";
// ...
</script>
HTML attributes are case insensitive: You should avoid using capital letters in props names. Maybe it's the cause of your problem.
<achievement-post img_url="../assets/ach1.jpg"></achievement-post>
And
export default {
props: {
img_url: String
},
// ...
}
You can see it at the bottom of this page:
https://vuejs.org/2016/02/06/common-gotchas/
or at the top of this page:
https://v2.vuejs.org/v2/guide/components-props.html
I'm quite new with VueJS. I'm working on a new project with VueCLI3 & VuetifyJS.
I'm trying to create a reusable components based on VuetifyJS components and would like to make things easier by passing multiple props in a separate file to render them at once in my new component files.
I found this article that explains a technique to achieve such thing.
https://alligator.io/vuejs/passing-multiple-properties/
Every time I need to render them I must import my seperate file.
component1.vue
<template>
<v-btn v-bind='buttonProps'>
Button 1
</v-btn>
</template>
<script>
import { buttonProps } from './props.js';
export default {
data: () => ({ buttonProps })
}
</script>
component2.vue
<template>
<v-btn v-bind='buttonProps'>
Button 2
</v-btn>
</template>
<script>
import { buttonProps } from './props.js';
export default {
data: () => ({ buttonProps })
}
</script>
Is there any way to register the file globally so it allows me to use it anywhere in the app like this?
props.js
export const buttonProps = {
color: 'primary',
small: true,
outline: true,
block: true,
ripple: true,
href: 'https://alligator.io'
}
main.js
import Props from 'props.js';
component3.vue
<template>
<v-btn v-bind='buttonProps'>
Button 3
</v-btn>
</template>
<script>
... // no import needed
</script>
You can use a mixin and register that mixin globally.
buttonPropsMixin
export default {
data() {
return {
buttonProps: {
color: 'primary',
small: true,
outline: true,
block: true,
ripple: true,
href: 'https://alligator.io'
}
}
}
}
main.js
import buttonPropsMixin from '...';
Vue.mixin(buttonPropsMixin)
Note That each vue component has its own buttonProps, so if you change in one component the color it will not affect the other components!
If you want buttonProps to have the same state across all your components you can go the vuex way as Igor mentioned and use it with an mixin where you define the mapGetters in that mixin.
If data in props.js doesn't need to be reactive and all the components are children of some root component you could do this:
main.js:
import buttonProps from 'props.js';
new Vue({
el: rootComponentElement,
buttonProps: buttonProps,
render: h => h(rootComponent)
})
component.vue:
<template>
<v-btn v-bind='$root.$options.buttonProps'>
Button 3
</v-btn>
</template>
<script>
... // no import needed
</script>
Otherwise I would advice you to use Vuex or use the global bus method described here.