v-bind:src property not working with v-for - vue.js

For some reason the imageURL property is not working, even though the url is correct, with the v-bind:src attribute.
The template:
<div v-for="project in projects" :key="project.id">
<section class="project-wrapper">
<img :src="project.imageURL" alt="Project image"/> //THE PROBLEM
<h1>{{ project.title }}</h1>
<p>{{ project.about }}</p>
<router-link :to="{ name: project.routeName }" class="type-two-link">ver projeto</router-link>
</section>
</div>
The script:
data() {
return {
projects: [
{
id: this.projectId,
title: "Minimalist Portfolio",
about: "...",
imageURL: "./minimalist-porfolio-desktop.png", //THE PROBLEM
routeName: "Minimalist Portfolio",
},
],
};
},
What am I doing wrong?
Any help is welcome.

I've tried to use 'required()' in the template, but it didn't worked.
So, this is how I solved it:
data() {
return {
projects: [
{
"...",
imageURL: require("../../assets/images/projects/minimalist-portfolio/minimalist-porfolio-desktop.png"),
routeSlugName: "My Portfolio",
},
],
};
},
,
You can learn more here: Static image src in Vue.js template

Related

img src didnt show in vue

So I here my code, I create a component and its got a slot inside it, I want to passing the image url into <img /> with v-bind:src but the image didn't showed up on the docs, nor there is no error in console.
<MyComp v-if="myData.length">
<template #img>
<div class="my-slot">
<img :src="myData.image"/>
</div>
</template>
</MyComp>
data () {
return {
myData: [
{
image: "https://www...."
},
{
image: "https://www...."
},
{
image: "https://www...."
}
}
}
Wondering did I miss something? I couldn't use new URL or require too. The static url on tag also didnt work.
In your case you need to use scoped-slot. Pass myData as prop in your parent component and use scoped-slot to pass url in :src
Example:
<template>
<MyComp v-if="myData.length" :images="myData">
<template #img="{ image }">
<div class="my-slot">
<img :src="image"/>
</div>
</template>
</MyComp>
</template>
<script>
export default {
data () {
return {
myData: [
{
image: 'https://www....',
},
{
image: 'https://www....',
},
{
image: 'https://www....',
},
],
}
},
}
</script>
It's because your myData variable is an array of objects, and you're referring to it as if it was simply an object:
<img :src="myData.image"/>
You should reference particular element of the array:
<img :src="myData[0].image"/>
<MyComp v-if="myData.length">
<template #img>
<div class="my-slot">
<img :src="myData.image" />
</div>
</template>
</MyComp>
<script>
export default {
data() {
return {
myData: [
{
image: "https://www...."
},
{
image: "https://www...."
},
{
image: "https://www...."
}
]
};
}
};
</script>

Nesting in VueDraggable is not not working

here's my problem :
I'm using the VueDraggable library in order to drag and drop elements between a DragBoard.vue and a DropBoard.vue, and a specific type of element should allow to be nested when it is in the DropBoard.
I'm going to take this element as an example :
"Grouped Items"
To do that I've followed this example : https://github.com/SortableJS/vue.draggable.next/blob/master/example/components/nested-example.vue
And this is what I get when I drop "Grouped Items" into the DropBoard.vue :
IMG
As you can see, the DropBoard appears a second time inside Grouped items for whatever reason. I've supposed that the nested-draggable tag also loop what is out of the draggable tag and I've no idea how to resolve that...
📄 dragItems.JSON (used in DragBoard.vue) :
1st object is a common element
2nd object is a nestable element
[
{
"type": "Simple list",
"title": "Simple list",
"id": 1,
"properties": "this is an item property"
},
...
{
"type": "Grouped items",
"title": "Grouped items",
"id": 10,
"properties": "this is an item property",
"tasks": []
},
...
]
🚩 DropBoard.vue template:
<template>
<div class="board">
<div class="head">Mock</div>
<div class="dd-container">
<draggable
:list="tasks"
v-model="dropItems"
item-key="title"
:group="{ name: 'items', put: true }"
#change="log"
>
<template #item="{ element }">
<div
class="item"
:key="element"
>
<div>
{{ element.title }}
</div>
<nested-draggable
v-if="element.tasks"
:tasks="element.tasks"
class="group-container"
/>
<div class="trashico" :key="index">
<i class="fas fa-trash" #click="deleteItem(index)"></i>
</div>
</div>
</template>
</draggable>
</div>
</div>
</template>
🚩 DropBoard.vue script
<script>
import draggable from "vuedraggable";
export default {
name: "nested-draggable",
components: {
draggable,
},
props: {
dropItems: {
type: Array,
required: true,
},
tasks: {
required: true,
type: Array,
},
},
data() {
return {
dropItems: [],
};
},
methods: {
deleteItem(id) {
this.dropItems.splice(id, 1);
},
},
};
</script>
Here is what I found while using the Vue DevTools, it's quit explicit about the problem.
See image: IMG

Vue.js v3 passing data through router link

I have an object in Portfolio.vue like this:
data() {
return {
portfolio: {
front: [
{ description: '1. project ', src: require("../assets/sample.jpg"), slug: 'first'},
{ description: '2. project', src: require("../assets/sample.jpg"), slug: 'second' },
{ description: '3. project', src: require("../assets/sample.jpg"), slug: 'third' },
]
}
}
}
Portfolio.vue:
<div class="">
<div v-for="(data,index) in portfolio.front" :key="index">
<router-link :to="'/portfolio/'+data.slug"> <div class="element" :data-description="data.description">
<img :src="data.src " alt="">
</div>
</router-link>
</div>
</div>
PortfolioProduct.vue
<template>
<div>
<p>I want to take data to here. In here, i have to reach the data like this: portfolio.front.description</p>
</div>
</template>
<script>
export default {
props: {
},
}
</script>
My routes:
const routes = [
{
path: "/portfolio",
name: "Portfolio",
component: Portfolio,
},
{
path: "/portfolio/:id",
name: "PortfolioProduct",
component: PortfolioProduct,
props: true,
},
];
I want to take data from Portfolio.vue to PortfolioProduct.vue , i couldn't solve. I'm using vue js3 , if you help me i will be glad. Thank you
You could probably use the template literal, changing the router-link would be like so:
<router-link :to="`/portfolio/${data.slug}`"> <div class="element" :data-description="data.description">

How should I define a concrete object name in vue components

Vue.component("blog-post", {
props: ["post"],
template: `
<div>
<h3>{{ post.title }}</h3>
<p> #####: {{ post.content }} </p>
</div>
`
});
new Vue({
el: "#blog-post-demo",
data: {
posts: [
{ id: 1, title: "My journey with Vue" },
{ id: 2, title: "Blogging with Vue" },
{ id: 3, title: "Why Vue is so fun" }
]
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.0/vue.js"></script>
<div id="blog-post-demo" class="demo">
<blog-post
v-for="post in posts"
v-bind:key="post.id"
v-bind:title="post.title"
v-bind:content="post.id"
></blog-post>
</div>
The above example is not working. But I am able to make the below one work.
Vue.component("blog-post", {
props: ["content", "title"],
template: `
<div>
<h3>{{ title }}</h3>
<p> #####: {{ content }} </p>
</div>
`
});
new Vue({
el: "#blog-post-demo",
data: {
posts: [
{ id: 1, title: "My journey with Vue" },
{ id: 2, title: "Blogging with Vue" },
{ id: 3, title: "Why Vue is so fun" }
]
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.0/vue.js"></script>
<div id="blog-post-demo" class="demo">
<blog-post
v-for="post in posts"
v-bind:key="post.id"
v-bind:title="post.title"
v-bind:content="post.id"
></blog-post>
</div>
Could someone explain what am I missing here?
In the first case, your component accept post as the prop, which is what you should pass from the parent component.
Vue.component("blog-post", {
props: ["post"],
template: `
<div>
<h3>{{ post.title }}</h3>
<p> #####: {{ post.content }} </p>
</div>
`
});
new Vue({
el: "#blog-post-demo",
data: {
posts: [
{ id: 1, title: "My journey with Vue" },
{ id: 2, title: "Blogging with Vue" },
{ id: 3, title: "Why Vue is so fun" }
]
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.0/vue.js"></script>
<div id="blog-post-demo" class="demo">
<blog-post
v-for="post in posts"
v-bind:post="post"
v-bind:key="post.id"
></blog-post>
</div>

Vue Apollo Graphql get meta tags from wordpress

I have a problem with add meta information from graphql to vue-meta.
how to from external about.gql information add to vue-meta?
Adding one more gql query I would like to avoid. So I am not so experienced with Vue and Apollo and any help will be good!
Thanks a lot!
about.vue
<ApolloQuery :query="require('../graphql/about.gql')">
<template slot-scope="{ result: { loading, data } }">
<div v-if="loading">Loading...</div>
<div class="" v-if="data">
<div class="row">
<div class="col-xs-12">
<div class="p40" v-html="data.pageBy.content"></div>
</div>
</div>
</div>
</template>
</ApolloQuery>
<script>
export default {
data: () => ({
loading: 0,
error: null,
}),
metaInfo: {
// title will be injected into parent titleTemplate
title: 'About',
meta: [
{
name: 'description',
content:
'Epiloge is about connecting in your field of interest. Our vision is to help people share their knowledge, work, projects, papers and ideas and build their network through what they do rather where they live, study or work.'
},
{
property: 'og:title',
content: 'Epiloge - Build your network in your field of interest'
},
{ property: 'og:site_name', content: 'Epiloge' },
{ property: 'og:type', content: 'website' },
{ name: 'robots', content: 'index,follow' }
]
}
}
</script>