I want to display a series of articles from this Google Alert RSS Feed (https://www.google.ie/alerts/feeds/10663948362751557705/4511034072220974544) on my Vue.js application.
I have created a "Feed.vue" component and wish to display the feed on "App.vue". My backend is Express.js. First off, am I even doing this correct? I got this working in Javascript but I want to use Vue.js as my front end.
For some reason I am getting this error regarding my title:
enter image description here
My code:
Feed.vue
<template>
<li>
{{feed.title}}
</li>
</template>
<script>
export default {
props: ["feed"]
}
</script>
App.vue
<template>
<div id="app">
<Feed></Feed>
<ul>
<feed v-for="feed in feeds" :feed="feed" :key="feed.title"></feed>
</ul>
</div>
</template>
<script>
import io from 'socket.io-client'
import Feed from './components/Feed.vue'
export default {
components: {
Feed
},
data () {
return {
feeds: []
}
},
mounted() {
this.subscribeToFeed();
},
methods: {
subscribeToFeed() {
const socket = io();
socket.on('feed', data => {
data.feed.entries().forEach(feed => {
this.feeds.push(feed);
});
});
}
}
}
</script>
Where do I place this in my code?
const socket = io();
socket.on('feed', data => {
for (const [i, item] of data.feed.entries()) {
let itemContainer = $('<span></span>')
.addClass('feed__content')
.append(`<p>${i + 1}) ${item.title}<p>`)
.append(`<p>${item.link}</p>`)
.appendTo('.feed');
}
});
This error happen, because you declared the Feed component without properties in line 3 in App.vue.
Your code is that way:
<template>
<div id="app">
<Feed></Feed> <!-- YOU NEED REMOVE THIS LINE -->
<ul>
<feed v-for="feed in feeds" :feed="feed" :key="feed.title"></feed>
</ul>
</div>
</template>
The correct code is:
<template>
<div id="app">
<ul>
<feed v-for="feed in feeds" :feed="feed" :key="feed.title"></feed>
</ul>
</div>
</template>
Related
guys its my first time to ask a question here in stackoverflow and i really needs an answer
i have a project which i get data from external api from pinia (similar to VueX) then i pass them into a page then i loop through the data and purse them into a component card to be a dynamic component which renders what ever the data i get
i am having a problem in passing the data into the dynamic component.
i fetched the data successflly in pinia , store it into the state in the store . but cant make it into a variable to loop through them
first iam using typescript
for shop interface ShopData.ts
export default interface ShopData {
id: string
name: string
logoPath: string
address: string
}
for types.ts
export type Shop = ShopData
that is my ShopQueries.ts
import { acceptHMRUpdate, defineStore } from 'pinia'
import type { Shop } from '~/types'
import { getShops } from '~/api/ShopsQueries'
export const useShopQueriesStore = defineStore('ShopQueries', {
state: () => ({
shops: [] as Shop[],
}),
actions: {
async getShops(num: number) {
const response = await getShops(num)
this.shops = response.data
return this.shops
},
},
})
if (import.meta.hot)
import.meta.hot.accept(acceptHMRUpdate(useShopQueriesStore, import.meta.hot))
the page file index.vue
<script setup lang="ts">
import { useShopQueriesStore } from '~/stores/ShopQueries'
import type { Shop } from '~/types'
const shopStore = useShopQueriesStore()
const shops = ref<Shop[] | null>()
onMounted(async() => {
shops.value = await shopStore.getShops(6)
})
</script>
<template>
<div class="row">
<div class="col-md-6 col-xxl-4 mt-3 my-3">
<ShopCard
v-for="shop in shopStore.$state.shops"
:key="shop.id"
:address="shop.address"
:name="shop.name"
:image="shop.logoPath"
/>
</div>
</div>
</template>
Which i also want to make it a card and wraps down and i cant :(
that is the card component ShopCard.vue
<script setup lang="ts">
import type { PropType } from '#vue/runtime-core'
import type { Shop } from '~/types'
const props = defineProps({
shop: null as null | PropType<Shop>,
})
console.log(props)
onMounted(() => {
})
const { shop } = toRefs(props)
</script>
<template>
<div class="card">
<div class="card-body d-flex flex-center flex-column pt-12 p-9">
<div class="symbol symbol-65px symbol-circle mb-5">
<img src="{{shop.image}}" alt="image">
</div>
<a class="fs-4 text-gray-800 text-hover-primary fw-bolder mb-0" href="">{{ shop.name }}</a>
</div>
<div class="fw-bold text-gray-400 mb-6">
{{ shop.address }}
</div>
</div>
</template>
i know its hard .. but i really needs some help please !
the whole task depends on it
waiting for help ...
I have created a .Vue file to feature information on a cafe (Cafe Details Page). However, I would like to take parts of this details page and make it its own component, in order to manage any template updates more efficiently.
Therefore, I have created a Component (CafeHeader.vue) inside a components folder. I am trying to pass down the data from my array (Which is being used on my Cafe Details page) to this component using Props. However, I can't seem to get it to work.
The template for my Cafe Details Page is as below:
<template>
<div>
<div v-for="cafe in activeCafe">
<CafeHeader v-bind:cafes="cafes" />
<div class="content">
<p>{{ cafe.cafeDescription }}</p>
</div>
</div>
</div>
</template>
<script>
import CafeHeader from "./../../components/CafeHeader";
import cafes from "./../../data/cafes"; // THIS IS THE ARRAY
export default {
data() {
return {
cafes: cafes
};
},
components: {
CafeHeader,
},
computed: {
activeCafe: function() {
var activeCards = [];
var cafeTitle = 'Apollo Cafe';
this.cafes.forEach(function(cafe) {
if(cafe.cafeName == cafeTitle){
activeCards.push(cafe);
}
});
return activeCards;
}
}
};
</script>
Then, in a components folder I have a component called CafeHeader where I am wanting to use the data from the array which is previously imported to the Cafe Details page;
<template>
<div>
<div v-for="cafe in cafes">
<h1>Visit: {{cafe.cafeName}} </h1>
</div>
</div>
</template>
<script>
export default {
name: "test",
props: {
cafes: {
type: Array,
required: true
}
},
data() {
return {
isActive: false,
active: false
};
},
methods: {}
};
</script>
If in the CafeHeader component I have cafe in cafes, it does render data from the cafes.js However, it is every cafe in the list and I want just a single cafe.
<template>
<div>
<div v-for="cafe in cafes">
<h1>Visit: {{cafe.cafeName}} </h1>
</div>
</div>
</template>
The component also needed activeCafes on the v-for
<template>
<div>
<div v-for="cafe in activeCafes">
<h1>Visit: {{cafe.cafeName}} </h1>
</div>
</div>
</template>
I have got it now where I can render the entire array in a random order, just cant render one element of the array. I am also having an issue in showing the entire json object instead of just the text of the quote.
here is the html:
<template>
<div>
<button v-on:click="getTeacupData">Get Teacup Data</button>
<!-- <div>{{ teacupDataList }}</div> -->
<div
v-for="teacupData in teacupDataList"
:key="teacupData.quote"
class="teacup-data"
>
<div>
<span class="quote">
{{
teacupDataList[Math.floor(Math.random() * teacupData.quote.length)]
}}</span
>
</div>
</div>
</div>
</template>
and here is the script:
<script>
import axios from 'axios'
export default {
name: 'Teacup',
data() {
return {
teacupDataList: []
}
},
methods: {
getTeacupData() {
axios.get('/teacupProph.json').then((response) => {
this.teacupDataList = response.data
})
}
}
}
</script>
Add a computed property called randomQuote as follows :
<script>
import axios from 'axios'
export default {
name: 'Teacup',
data() {
return {
teacupDataList: []
}
},
computed:{
randomQuote(){
const rand=Math.floor(Math.random() * this.teacupDataList.length)
return this.teacupDataList[rand]?this.teacupDataList[rand].quote:""
}
},
methods: {
getTeacupData() {
axios.get('/teacupProph.json').then((response) => {
this.teacupDataList = response.data
})
}
}
}
</script>
in template don't use v-for loop just call the computed property :
<template>
<div>
<button v-on:click="getTeacupData">Get Teacup Data</button>
<!-- <div>{{ teacupDataList }}</div> -->
<div>
<span class="quote">
{{
randomQuote
}}</span>
</div>
</div>
</template>
Edit
place your json file inside the components folder and call it like axios('./teacupProph.json') and fix the #:click to #click, check this code
Looping through a Firebase project using v-for and having a devil of a time trying to get one value (imgurl) for each item. Here are a couple rows form the firebase object:
firebase data
Here is my script code in App.vue.
<script>
import Firebase from "firebase";
let config = {
…all correct blah blah…
};
let app = Firebase.initializeApp(config);
let db = app.database();
let itemsRef = db.ref("tblItems");
export default {
name: "app",
firebase: {
items: itemsRef
},
data() {
return {
styleObject: {
backgroundImage: "" //RIGHT IN HERE I NEED item.imgname BUT CAN'T FIGURE OUT SYNTAX.
}
};
}
};
Here is where I loop through using v-for and key and I call StyleObject.
<template>
<div id="app">
<div v-for="item in items" :key="item.id" v-bind:style="styleObject">
<h1>{{ item.title }}</h1>
<h2>{{ item.author }}</h2>
</div>
<router-view/>
</div>
</template>
Everything works fine, except I can't figure you how to get item.imgname where the RIGHT IN HERE comment is so I can use it for a background image in a style= attribute (each div has its own background image). Any help much appreciated.
In my opinion the easiest way to do that is to make de div into a new component and to pass the image name as a prop into it. Your component will then look like this:
Vue.component('exampleDiv', {
props: ['imgname','title','author'],
template: '<div :style="styleObject">
<h1>{{ title }}</h1>
<h2>{{ author }}</h2>
</div> ',
data() {
return {
styleObject: {
backgroundImage: this.imgname
}
}
})
You can then call the component in your code like this:
<template>
<div id="app">
<exampleDiv v-for="item in items"
:key="item.id" :title="item.title"
:author="item.author" :imgname = "item.imgname">
</exampleDiv>
<router-view/>
</div>
</template>
How I can get access to parent's data variable (limitByNumber) in my child component Post?
I tried to use prop but it doesn't work.
Parent:
import Post from './components/Post.vue';
new Vue ({
el: 'body',
components: { Post },
data: {
limitByNumber: 4
}
});
Component Post:
<template>
<div class="Post" v-for="post in list | limitBy limitByNumber">
<!-- Blog Post -->
....
</div>
</template>
<!-- script -->
<script>
export default {
props: ['list', 'limitByNumber'],
created() {
this.list = JSON.parse(this.list);
}
}
</script>
Option 1
Use this.$parent.limitByNumber from child component. So your Component template would be like this
<template>
<div class="Post" v-for="post in list | limitBy this.$parent.limitByNumber" />
</template>
Option 2
If you want to use props, you can also achieve what you want. Like this.
Parent
<template>
<post :limit="limitByNumber" />
</template>
<script>
export default {
data () {
return {
limitByNumber: 4
}
}
}
</script>
Child Pots
<template>
<div class="Post" v-for="post in list | limitBy limit">
<!-- Blog Post -->
....
</div>
</template>
<script>
export default {
props: ['list', 'limit'],
created() {
this.list = JSON.parse(this.list);
}
}
</script>
If you want to access some specific parent, you can name all components like this:
export default {
name: 'LayoutDefault'
And then add some function (maybe like vue.prototype or Mixin if you need it in all your components). Something like this should do it:
getParent(name) {
let p = this.$parent;
while(typeof p !== 'undefined') {
if (p.$options.name == name) {
return p;
} else {
p = p.$parent;
}
}
return false;
}
and usage could be like this:
this.getParent('LayoutDefault').myVariableOrMethod