I would like to make ready to use components with my classes/stylish, I'm using mixins for the thing, but it seams the properties are not passed. I get the style but not the "items" i.e.
This is the code:
<template>
<span>
<p
class="text-left text-secondary text-caption ml-2 pb-0 pt-0 mb-0 mt-0"
v-if="label"
>
{{ label }}
</p>
<v-autocomplete
:class="getClass"
outlined
single-line
hide-details
v-bind="$props"
/>
</span>
</template>
<script>
import { VAutocomplete } from "vuetify/lib";
export default {
mixins: [VAutocomplete],
data() {
return {};
},
mounted() {
console.log(this.$props);
},
watch: {},
computed: {
getClass() {
return "input-style font-size-input text-light-input placeholder-light border-radius-md select-style mt-0 mb-2";
},
},
methods: {},
};
</script>
Related
Guys
I want to do a v-for using a component that has two differents props
COMPONENT
<template>
<div class="bg-light rounded p-2 px-5">
<h5> {{ cardNumber }}</h5>
<h3>{{ cardItem }}</h3>
</div>
</template>
<script>
export default {
name: 'HighlightCard',
props: ['cardItem', 'cardNumber']
}
</script>
V-FOR INSIDE OTHER COMPONENT
<template>
<div class="row m-auto">
<HighlightCard
v-for="(itemCard, index) in cardItems"
:key="index"
:cardItem="itemCard"
class="col m-3"/>
</div>
</template>
<script>
import HighlightCard from './HighlightCard.vue';
export default {
name: 'TopDashboard',
components: {
HighlightCard
},
data () {
return {
cardItems: ['Impressões', 'Cliques', 'Conversões', 'Custo'],
cardNumbers: ['2.300', '259', '45', 'R$ 350,00']
}
}
}
</script>
Is there any way to also add the cardNumber using v-for? It works fine the way it is, but I wanna use the both props, not just the ItemCard
If I understood you correctly , try to return right number with index:
Vue.component('highlightCard', {
template: `
<div class="bg-light rounded p-2 px-5">
<h5> {{ cardNumber }}</h5>
<h3>{{ cardItem }}</h3>
</div>
`,
props: ['cardItem', 'cardNumber']
})
new Vue({
el: "#demo",
data () {
return {
cardItems: ['Impressões', 'Cliques', 'Conversões', 'Custo'],
cardNumbers: ['2.300', '259', '45', 'R$ 350,00']
}
},
methods: {
num(val) {
return this.cardNumbers[this.cardItems.findIndex(i => i === val)]
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<div class="row m-auto">
<highlight-card
v-for="(itemCard, index) in cardItems"
:key="index"
:card-item="itemCard"
:card-number="num(itemCard)"
class="col m-3"/>
</div>
</div>
I have a web app which shows the blog posts in a grid. But the BlogCards component in the Home.vue just outputs nothing, whereas it should output the blogs in a grid format. All the datas are stored in firebase. If I go to /blogs, I can see the blogs in grid format, but it doesn't work on the Home.vue. It also spits out the Vue Warn: property or method "blogPostsCards" is not defined on the instance but referenced during render.
I took this code from this tutorial at 5:31:05 minute mark.
Any solution to this problem.
Home.vue
<template>
<div class="home">
<BlogPost :post="post" v-for="(post, index) in blogPostsFeed" :key="index" />
<div class="blog-card-wrap">
<div class="container">
<h3>View more recent blogs</h3>
<div class="blog-cards">
<BlogCards :post="post" v-for="(post, index) in blogPostsCard" :key="index" />
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import BlogPost from '../components/BlogPost.vue'
import BlogCards from '../components/BlogCards.vue'
export default {
name: "Home",
components: {
BlogPost,
BlogCards,
Arrow
},
computed : {
blogPostsCards() {
return this.$store.getters.blogPostsCards;
},
blogPostsFeed() {
return this.$store.getters.blogPostsFeed;
},
}
};
</script>
BlogCards.vue
<template>
<div class="blog-card">
<img :src="post.blogCoverPhoto" alt="">
<div class="info">
<h4>{{ post.blogTitle }}</h4>
<h6>Posted on: {{ new Date(post.blogDate).toLocaleString('en-us', {dateStyle: "long"})}}</h6>
<router-link class="link" to="#" >
View Post <Arrow class="arrow" />
</router-link>
</div>
</div>
</template>
<script>
export default {
name: "blogCard",
props: ["post"],
computed: {
editPost() {
return this.$store.state.editPost
},
}
}
</script>
And getter function in store/index.js
getters:{
blogPostsFeed(state){
return state.blogPosts.slice(0,2);
},
blogPostsCards(state) {
return state.blogPosts.slice(2,6);
},
},
<BlogCards :post="post" v-for="(post, index) in blogPostsCard" :key="index" />
In your Home.vue >> change blogPostsCard to blogPostsCards because you use blogPostsCards in your computed so it gives you that error.
I want to ask why the newly added data does not display in the template, but it does show the newly added data in using console.log (see the ViewPost.vue).
This is the result after I add new post: result.png. Someone knows how to achieve this?
Here is my parent component:
<template>
<section>
//more codes here
<ViewPost v-for="data in postData" :key="data.post_id" :data="data" />
</section>
</template>
<script>
import { mapState } from 'vuex';
export default {
components: {ViewPost},
computed: {
...mapState({
postData: state => state.post.datas,
}),
}
//more codes here
};
</script>
And below is the ViewPost.vue
<template>
<span>
<div class="card mb-10">
<h1>body</h1>
{{ data.post_body }}
</div>
</span>
</template>
<script>
export default {
props: {
data: {},
},
created() {
console.log(this.data);
},
};
index as a key may work fine.
<template>
<section>
//more codes here
<ViewPost v-for="(data,index) in postData" :key="index" :data="data" />
</section>
</template>
<script>
import { mapState } from 'vuex';
export default {
components: {ViewPost},
computed: {
...mapState({
postData: state => state.post.datas,
}),
}
//more codes here
};
</script>
ViewPost.vue
<template>
<span>
<div class="card mb-10">
<h1>body</h1>
{{ data.post_body || data.body }}
</div>
</span>
</template>
<script>
export default {
props: ['data']
created() {
console.log(this.data);
},
};
This question already has an answer here:
update data in slot vuejs
(1 answer)
Closed 2 years ago.
I have a scoped slot. I need the content that am passing to the slot to be able to affect the parent template.
This is what i have so far:
Parent.vue
<template>
<div>
<slot :text="text" :msg="msg"/>
<p>{{text}}</p>
<p>{{msg}}</p>
</div>
</template>
<script>
export default {
name: "Parent",
data() {
return {
text: "",
msg: ""
};
}
};
</script>
App.vue
<template>
<parent>
<template #default="{ text, msg }">
<input type="text" v-model="text"/>
<input type="text" v-model="msg"/>
</template>
</parent>
</template>
<script>
import Parent from "./components/Parent";
export default {
name: "App",
components: {
Toolbar
},
}
This does'nt work. How can i do something of the sort?
This is not possible. You can't change props (in this case slot props) given to your component(App.vue), but you can do something like this, with a "handler" method.
Parent.vue
<template>
<div>
<slot :text="text" :msg="msg" :setValue="setValue" />
<p>{{ text }}</p>
<p>{{ msg }}</p>
</div>
</template>
<script>
export default {
name: 'Parent',
data() {
return {
text: '',
msg: ''
};
},
methods: {
// set the current value with a function
setValue(e) {
this[e.target.name] = e.target.value;
}
}
};
</script>
App.vue
<template>
<parent>
<template #default="{ text, msg, setValue }">
Text: {{ text }}<br />
Msg: {{ msg }}<br /><br />
<!-- I have named the input fields after the variables in your data object and have the "setValue" method triggered by #input. -->
<input type="text" name="text" #input="setValue" />
<input type="text" name="msg" #input="setValue" />
</template>
</parent>
</template>
<script>
import Parent from './components/Parent';
export default {
name: 'App',
components: {
Parent
}
};
</script>
I am trying to add the info icon in AG Grid header for displaying the tooltip when I hover on the icon. I have created the custom tooltip component which shows the tooltip when hovered but when I add the icon the default sorting and filters get removed.
import Vue from "vue";
export default Vue.extend({
template: `
<div>
<div>
{{ params.headerName }}
<v-tooltip bottom max-width="200">
<template v-slot:activator="{ on }">
<i v-on="on" class="custom-info info circle icon"></i>
</template>
<span>{{params.toolTipText}}</span>
</v-tooltip>
</div>
</div>
`,
data: function() {
return {
};
},
beforeMount() {},
mounted() {
// console.log("header components",params.value);
},
methods: {
},
}, );
**
Column Defs Code: **
this is the code
for column defs.
field: "ndc11",
filter: "agNumberColumnFilter",
headerComponent: 'customTooltipIcon',
headerComponentParams: {
headerName: "NDC11",
toolTipText: "NDC11"
},
pinned: "left",
cellClass: params => {
if (
params.data &&
params.data.ion_dispute_code &&
params.data.ion_dispute_code.length &&
(params.data.ion_dispute_code.includes("O") ||
params.data.ion_dispute_code.includes("N") ||
params.data.ion_dispute_code.includes("U") ||
params.data.ion_dispute_code.includes("G"))) {
return "validation-grid-cell-red"
}
},
cellRenderer: "ndc11Render",
sort: "asc"
},
because you're rewriting ag-grid header with you'r custom one, and not adding the sorting and filtering in it
here is an example how it should look like:
export default Vue.extend({
template: `
<div>
<div
v-if="params.enableMenu"
ref="menuButton"
class="customHeaderMenuButton"
#click="onMenuClicked($event)"
>
<i class="fa" :class="params.menuIcon"></i>
</div>
<div class="customHeaderLabel">{{ params.headerName }}</div>
<v-tooltip bottom max-width="200">
<template v-slot:activator="{ on }">
<i v-on="on" class="custom-info info circle icon"></i>
</template>
<span>{{ params.toolTipText }}</span>
</v-tooltip>
<div
v-if="params.enableSorting"
#click="onSortRequested('asc', $event)"
:class="ascSort"
class="customSortDownLabel"
>
<i class="fa fa-long-arrow-alt-down"></i>
</div>
<div
v-if="params.enableSorting"
#click="onSortRequested('desc', $event)"
:class="descSort"
class="customSortUpLabel"
>
<i class="fa fa-long-arrow-alt-up"></i>
</div>
<div
v-if="params.enableSorting"
#click="onSortRequested('', $event)"
:class="noSort"
class="customSortRemoveLabel"
>
<i class="fa fa-times"></i>
</div>
</div>
`;
data: function () {
return {
ascSort: null,
descSort: null,
noSort: null
};
},
beforeMount() {},
mounted() {
this.params.column.addEventListener('sortChanged', this.onSortChanged);
this.onSortChanged();
},
methods: {
onMenuClicked() {
this.params.showColumnMenu(this.$refs.menuButton);
},
onSortChanged() {
this.ascSort = this.descSort = this.noSort = 'inactive';
if (this.params.column.isSortAscending()) {
this.ascSort = 'active';
} else if (this.params.column.isSortDescending()) {
this.descSort = 'active';
} else {
this.noSort = 'active';
}
},
onSortRequested(order, event) {
this.params.setSort(order, event.shiftKey);
}
}
});
example was taken from ag-grid documentation: https://www.ag-grid.com/javascript-grid-header-rendering/#vueCellEditing
also here https://www.ag-grid.com/javascript-grid-header-rendering/#vueCellEditing you could find more details related to how header components works and custom header components should work