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
Related
Using nuxtjs/svg package, I'm conditionally rendering inline SVGs thus:
<ArrowRight v-if="condition" />
<ExternalLink v-else />
Script:
import ArrowRight from '~/assets/img/arrow-right.svg?inline'
import ExternalLink from '~/assets/img/external-link.svg?inline'
export default {
components: {
ArrowRight,
ExternalLink
}
}
I'd like to make these imports dynamically, but I don't know how in this case partly because of the necessity of the "?inline" part when importing the SVG.
Any idea as to how I can import the SVGs dynamically?
<template>
<div v-html="require(`~/assets/img/${image}.svg?raw`)"/>
</template>
<script>
export default {
computed: {
image() {
return condition ? 'arrow-right' : 'external-link'
}
}
}
</script>
That's one way by using SVGs as raw. But the idea should be clear ;-)
(copied from nuxt svg module readme)
To dynamically import an SVG, you can use the inline require() syntax.
<template>
<div v-html="require(`../assets/${name}.svg?raw`)" />
</template>
<script>
export default {
props: {
name: { type: String, default: "image" },
},
};
</script>
To render an SVG without wrapper element and the use of v-html, a combination of dynamic components and ?inline can be used.
<template>
<component :is="require(`../assets/${name}.svg?inline`)" />
</template>
<script>
export default {
props: {
name: { type: String, default: "image" },
},
};
</script>
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 have to do some simple thing.
I have to generate different select options to generate different data.
So I create component and I passing array with values, but only in theory xD
When I go to road i got error cold:
app.js:37990 [Vue warn]: Failed to mount component: template or render
function not defined.
found in
---> <SelectComponent> at resources/js/components/SelectComponent.vue
<ExampleComponent> at resources/js/components/ExampleComponent.vue
<Root>
My component is simple for test do,
<h1> test connection </h1>
<script>
export default {
name: 'SelectComponent',
data () {
return {}
}
}
</script>
my main component
import SelectComponent from './SelectComponent.vue';
export default {
components: {
SelectComponent,
},
mounted() {
console.log('Component mounted.')
},
}
where is my issue?
If you look at the documentation you'll see that the HTML should be wrapped in the <template> element. So change your component to:
<template>
<h1> test connection </h1>
</template>
<script>
export default {
name: 'SelectComponent',
data () {
return {}
}
}
</script>
<template>
<div
v-editable="blok"
class="util__flex">
<component
v-for="blok in blok.columns"
:key="blok._uid"
:blok="blok"
:is="blok.component"/>
</div>
</template>
<script>
export default {
props: ['blok']
}
</script>
Im doing tutorial at Storyblok, and I do get such an error.
https://www.storyblok.com/tp/nuxt-js-multilanguage-website-tutorial#creating-the-homepage-components
Props should at least define their types vue/require-prop-types
You have probably enabled ESlint on project initialization (see create-nuxt-app options), that activated this mandatory rule.
So you have to declare a following type:
String
Number
Boolean
Array
Object
Date
Function
Symbol
See Vue.js doc:
https://v2.vuejs.org/v2/guide/components-props.html#Prop-Types
https://v2.vuejs.org/v2/guide/components-props.html#Type-Checks
For your case:
<script>
export default {
props: {
blok: Object
}
}
</script>
For current nuxt version(v2.8.1), we should set props as follows:
<script>
export default {
props: {
blok: {
type: Object,
default: null
}
}
}
</script>
I'm trying to use a component in another component. On the created event, I can log this component and it returns the good object. However for some reasons, the component doesn't seem to be included. VueJS do not understand the validation tag.
Any ideas?
<template>
<main>
<validation :validate="$v.email" :model="'email'"></validation>
</main>
</template>
<script>
import { Validation } from 'components/helpers'
export default {
name: 'login',
component: { Validation },
created() {
// it works. print the component with his path
window.console.log(Validation)
}
}
</script>
[Vue warn]: Unknown custom element: - did you register
the component correctly? For recursive components, make sure to
provide the "name" option.
In components/helpers I have two file:
1) index.js
export { default as Validation } from './Validation'
2) Validation.vue
<template>
<div>
<span class="form__validation" v-if="validate && !validate.required">Required</span>
<template v-if="validation[model]">
<span class="form__validation" v-for="error in validation[model].messages">{{ error }}</span>
</template>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
name: 'validation',
data() {
return {
L: L
}
},
props: ['model', 'validate'],
computed: {
...mapGetters({
validation: 'getValidation'
})
}
}
</script>
Changing component for components did the trick. Shame on me :)