Bare-bones example from another post...
new Vue({
el: '#app',
data: {
filters: {
id: '',
issuedBy: '',
issuedTo: ''
},
items: [{id:1234,issuedBy:'Operator',issuedTo:'abcd-efgh'},{id:5678,issuedBy:'User',issuedTo:'ijkl-mnop'}]
},
computed: {
filtered () {
const filtered = this.items.filter(item => {
return Object.keys(this.filters).every(key =>
String(item[key]).includes(this.filters[key]))
})
return filtered.length > 0 ? filtered : [{
id: '',
issuedBy: '',
issuedTo: ''
}]
}
}
})
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"/><link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.css"/><script src="https://cdn.jsdelivr.net/npm/vue#2.5.17/dist/vue.min.js"></script><script src="//unpkg.com/babel-polyfill#latest/dist/polyfill.min.js"></script><script src="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.js"></script>
<div id="app">
<b-table striped show-empty :items="filtered">
<template slot="top-row" slot-scope="{ fields }">
<td v-for="field in fields" :key="field.key">
<input v-model="filters[field.key]" :placeholder="field.label">
</td>
</template>
</b-table>
</div>
Now I get how this works, but I am also integrating apollo for a graphql query. I have apollo populate items..
So I add apollo and a mounted (to block)
new Vue({
el: '#app',
apollo: {
searchPersons: GET_PERSON
},
data: {
filters: {
name: '',
location: '',
relocate: ''
},
},
computed: {
filtered () {
const filtered = this.items.filter(item => {
return Object.keys(this.filters).every(key =>
String(item[key]).includes(this.filters[key]))
})
return filtered.length > 0 ? filtered : [{
name: '',
location: '',
relocate: ''
}]
}
},
mounted: function () {
this.$apollo.queries.searchPersons.refetch().then((results) => {
this.totalRows = results.data.searchPersons.length
this.items = results.data.searchPersons
})
},
})
here is my GET_PERSON graphql if you were wondering
import { gql } from "apollo-boost";
export const GET_PERSON = gql`
query {
searchPersons(keyword: "", fromSource: false){
name
location
relocate
currentSalary
resumeBody
personemailSet {
email
}
personphoneSet {
phoneType
verified
number
}
personskillsSet {
term
score
weight
}
personresumeattachmentSet {
attachment
}
personworkplacepreferenceSet{
name
label
}
}
}
`;
So what happens is, the table tries to load (which is fine), but its trying to filter and grab the data before it has been returned so i am left with an error of
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: Cannot read property 'filter' of undefined"
and honestly I feel like mounted may not be the right way to do this?
I appreciate any help.
Thanks!
So iitially define it as an empty array.
data: {
filters: {
name: '',
location: '',
relocate: ''
},
items : []
//---^-----
},
Related
I'm actually a beginner in Javascript and vue.js.
I followed a tutorial to create a shopping single page application and i learned about router so i wanted to use them on this learning project.
I got some interestiong errors in the console.
Can someone explain me where am i doing something wrong?
index.html:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id = "app">
<h1>Shopping Cart</h1>
<ul>
<li v-for="item in shoppingCart">
{{ item.label }} {{ item.cost }} euros
{{ isSelected(item) }}
</li>
<p>total = {{ getTheTotal }} euros</p>
</ul>
<li v-for="item in shoppingCart">
<router-link to="item.link"><img v-if= "item.selected == true"width="150" height="100" :src="item.url"></img></router-link>
</li>
<router-view></router-view>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#2/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src = "vue.js"></script>
</body>
</html>
and the vue.js:
const Bananas = { template: '<div>in bananas</div>' }
const Apples = { template: '<div>in apples</div>' }
const Pears = { template: '<div>in apples</div>' }
const Cars = { template: '<div>in apples</div>' }
const router = new VueRouter ({
routes: [
{ path: '/bananas', component: Bananas },
{ path: '/apples', component: Apples },
{ path: '/pears', component: Pears },
{ path: '/cars', component: Cars }
]
})
const app = new Vue ({
el: "#app",
data: {
shoppingCart: [
{ label: "Apples", cost: 2, selected: false, url: 'https://i2.wp.com/ceklog.kindel.com/wp-content/uploads/2013/02/firefox_2018-07-10_07-50-11.png', link: "/apples" },
{ label: "Pears", cost: 3, selected: false, url: 'https://post.healthline.com/wp-content/uploads/2018/11/10617-Do_You_Have_a_Pear_Allergy-_732x549-thumbnail.jpg', link: "/pears" },
{ label: "Bananas", cost: 5, selected: false, url: 'https://media.lactualite.com/2014/08/banane.jpg',link: "/bananas" },
{ label: "Cars", cost: 5000, selected: false, url: 'https://specials-images.forbesimg.com/imageserve/5d3703e2f1176b00089761a6/960x0.jpg?cropX1=836&cropX2=5396&cropY1=799&cropY2=3364', link: "/cars" }
]
},
computed: {
getTheTotal() {
let rez = 0
this.shoppingCart.forEach(element => {
if (element.selected == true) {
rez += element.cost
}
console.log(rez)
})
return rez
}
},
methods: {
addItem: function(item) {
if (item.selected == false)
item.selected = true
else if (item.selected == true)
item.selected = false
},
isSelected: function(item) {
if (item.selected == true)
return ("remove")
if (item.selected == false)
return ("add")
}
}
}).$mount('#app')
the errors:
[Vue warn]: Error in render: "TypeError: Unable to get property 'matched' of undefined or null reference"
(found in <Root>)
TypeError: Unable to get property 'matched' of undefined or null reference
[Vue warn]: Cannot find element: #app
[Vue warn]: Error in render: "TypeError: Unable to get property 'matched' of undefined or null reference"
(found in <Root>)
TypeError: Unable to get property 'matched' of undefined or null reference
the page doesn't display anything anymore.
Thanks a lot! :)
i'm also a beginner on stack overflow so feel free to tell me if my post is wrong
You didn't pass the router object to the new Vue call so the app is unaware of the router / routes:
const app = new Vue ({
router, // ✅ Add this
el: "#app",
...
});
You also need to use a : binding on the <router-link> to attribute as follows:
<router-link :to="{ path: item.link }">
<img v-if="item.selected" width="150" height="100" :src="item.url">
</router-link>
And fix your data (3 out of 4 say "apples"):
const Bananas = { template: '<div>in bananas</div>' }
const Apples = { template: '<div>in apples</div>' }
const Pears = { template: '<div>in pears</div>' }
const Cars = { template: '<div>in cars</div>' }
You need to call Vue.use(router) before you declare your Vue instance.
I've been trying to pass props to data like this, as I saw on another post:
Child Component:
props: {
idInput: { type: String, required: false },
nameInput: { type: String, required: false },
},
data() {
return {
id: this.idInput,
name: this.nameInput,
}
}
So I can use it here:
<t-input v-model="name" type="text" />
Parent Component:
data() { return { game: {} } },
beforeCreated() { this.game = { name: "myName", id: "myID" }
<ChildComponent :name-input="game.name" :id-input="game.id" />
The problem is that "name" appears to be undefined, while if I do the same but changing "name" to "nameInput" it works, but I get the Vue error telling me not to use props like that. Any ideas?
Here is a functional example I created to demonstrate this case:
const comp = Vue.component('comp', {
template: '#myComp',
props: {
idInput: { type: String, required: false },
nameInput: { type: String, required: false },
},
data() {
return {
id: this.idInput,
name: this.nameInput,
}
}
});
new Vue({
el: "#myApp",
data () {
return {
game: {}
}
},
created() {
this.game = { name: 'myName', id: 'myID' };
},
components: { comp }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="myApp">
<comp :name-input="game.name" :id-input="game.id" />
{{game}}
</div>
<template id="myComp">
<div>
{{idInput}}
<br>
<input v-model="name" type="text" />
</div>
</template>
EDIT:
After checking the code, I think the problem is that you're setting the game atrribute in the data of the parent component on beforeCreated. Set it on created instead.
EDIT
OP found another way to do it. Instead of passing props one by one, pass just 1 prop with the object and use its attributes on the v-model.
With the following component, I am getting an Error: [vuex] do not mutate vuex store state outside mutation handlers. error:
<template>
<div>
<v-data-table
:headers="headers"
:items="items"
:search="search"
:key="tableKey"
:pagination.sync="pagination"
disable-initial-sort
rowKey
>
<template slot="items" slot-scope="props">
<tr #click="clicked(props.item)" :class="{'secondary': props.item[rowKey]===selectedCode}">
<td v-for="header in headers" :key="header.value">
<BaseTableColumn
:item="props.item"
:index="header.value"
:format="header.format"
/>
</td>
</tr>
</template>
</v-data-table>
</div>
</template>
<script>
export default {
name: 'BaseTable',
props: {
headers: Array,
items: Array,
search: String,
tableKey: String,
rowKey: String,
},
data: () => ({
pagination: {
rowsPerPage: 10,
totalItems: -1,
},
selectedCode: -1,
}),
components: {
BaseTableColumn: () => import('#/components/base/BaseTableColumn'),
},
methods: {
clicked(row) {
window.scrollTo(0, 0);
this.selectedCode = row[this.rowKey];
this.$set(row, 'selected', true);
this.$emit('rowClick', row);
},
highlightFirst(items) {
this.selectedCode = this.items[0][this.rowKey];
this.$set(this.items[0], 'selected', true);
},
},
updated() {
if (this.selectedCode === -1 && (typeof this.items === 'object') && this.items.length > 0) {
this.highlightFirst(this.items);
}
},
};
</script>
For reference, here is headers.js:
const headers = [
{
text: 'Tenant Code',
value: 'code',
},
{
text: 'Tenant ID',
value: 'name',
},
];
export default headers;
and BaseTableColumn.vue:
<script>
export default {
name: 'BaseTableColumn',
props: {
format: Function,
item: Object,
index: String,
},
methods: {
getText() {
return this.item[this.index];
},
},
render(createElement) {
if (this.$props.format) {
return this.$props.format(this.item, this.index, createElement);
}
return createElement('div', this.getText());
},
};
</script>
The issue happens here:
this.$set(this.items[0], 'selected', true);
However, if I follow the docs like so:
<template>
<div>
<v-data-table
:headers="headers"
:items="tableRows"
:search="search"
:key="tableKey"
:pagination.sync="pagination"
disable-initial-sort
rowKey
>
...
</template>
<script>
export default {
name: 'BaseTable',
props: {
headers: Array,
items: Array,
search: String,
tableKey: String,
rowKey: String,
},
...
computed: {
tableRows() {
const rows = [...this.items];
return rows;
},
},
...
methods: {
...
highlightFirst(items) {
this.selectedCode = this.items[0][this.rowKey];
this.$set(this.tableRows[0], 'selected', true);
},
},
updated() {
if (this.selectedCode === -1 && (typeof this.tableRows === 'object') && this.tableRows.length > 0) {
this.highlightFirst(this.tableRows);
}
},
};
</script>
I still get the errors, specifically in the updated() hook and the highlightFirst() method, even though I'm not referencing or mutating a prop. What else do I need to change to get rid of this error?
The way I eventually solved this problem was to emit an event and use the row value in the parent component:
clicked(row) {
window.scrollTo(0, 0);
this.selectedCode = row[this.rowKey];
this.$emit('rowClick', row);
},
However, to #Jesper's point above, since then, I have been using Object.assign() in cases like this where I need to break the link to Vuex.
So I want to show the user a preview of what an email will look like before it's sent out. To avoid styles from leaking from the parent page into the preview, I've decided to use an iframe. I want the preview to update in real time as the user enters form details.
How would I render a component within an iframe so that its props update automatically when the parent form is updated? This is the code I have so far:
this is the html:
<template>
<div id="confirmation">
<h2>Give a gift</h2>
<form #submit.prevent="checkout()">
<div class="date-section">
<label class="wide">Send</label>
<input type="radio" name="sendLater" v-model="sendLater" required :value="false">
<span>Now</span>
<input type="radio" name="sendLater" v-model="sendLater" required :value="true">
<span style="margin-right: 5px;">Later: </span>
<date-picker :disabled="!sendLater" v-model="date" lang="en" />
</div>
<div>
<label>Recipient Email</label>
<input type="email" class="custom-text" v-model="form.email" required>
</div>
<div>
<label>Recipient Name</label>
<input type="text" class="custom-text" v-model="form.name" required>
</div>
<div>
<label>Add a personal message</label>
<textarea v-model="form.message" />
</div>
<p class="error" v-if="error">Please enter a valid date.</p>
<div class="button-row">
<button class="trumpet-button" type="submit">Next</button>
<button class="trumpet-button gray ml10" type="button" #click="cancel()">Cancel</button>
</div>
</form>
<iframe id="preview-frame">
<preview-component :form="form" :sender-email="senderEmail" :term="term" />
</iframe>
</div>
</template>
here is the js (note: PreviewComponent is the actual preview that will be rendered in the iframe):
export default {
name: 'ConfirmationComponent',
components: {
DatePicker,
PreviewComponent
},
props: {
term: {
required: true,
type: Object
}
},
data() {
return {
form: {
name: null,
email: null,
message: null,
date: null
},
date: null,
sendLater: false,
error: false
}
},
computed: {
senderEmail() {
// utils comes from a separate file called utils.js
return utils.user.email || ''
}
},
watch: {
'form.name'(val) {
this.renderIframe()
},
'form.email'(val) {
this.renderIframe()
}
},
methods: {
renderIframe() {
if (this.form.name != null && this.form.email != null) {
console.log('rendering iframe')
// not sure what to do here......
}
}
}
}
I've tried all sorts of things but what seems to be the hardest is setting the props of the preview-component properly. Any help you all can give would be appreciated.
So as posted in one of the comments, Vuex works perfectly for this.
I also ended up creating a custom "IFrame" component that renders whatever you have inside its slot in an iframe.
Here is my Vuex store:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export const store = new Vuex.Store({
state: {
form: {
name: null,
email: null,
message: null
},
senderEmail: null,
term: null,
styles: null
},
mutations: {
updateForm(state, form) {
state.form = form
},
updateEmail(state, email) {
state.senderEmail = email
},
updateTerm(state, term) {
state.term = term
},
stylesChange(state, styles) {
state.styles = styles
}
}
})
my IFrame component:
import Vue from 'vue'
import { store } from '../../store'
export default {
name: 'IFrame',
data() {
return {
iApp: null,
}
},
computed: {
styles() {
return this.$store.state.styles
}
},
render(h) {
return h('iframe', {
on: {
load: this.renderChildren
}
})
},
watch: {
styles(val) {
const head = this.$el.contentDocument.head
$(head).html(val)
}
},
beforeUpdate() {
this.iApp.children = Object.freeze(this.$slots.default)
},
methods: {
renderChildren() {
const children = this.$slots.default
const body = this.$el.contentDocument.body
const el = document.createElement('div') // we will mount or nested app to this element
body.appendChild(el)
const iApp = new Vue({
name: 'iApp',
store,
data() {
return {
children: Object.freeze(children)
}
},
render(h) {
return h('div', this.children)
}
})
iApp.$mount(el)
this.iApp = iApp
}
}
}
finally here is how data is passed to the PreviewComponent from the ConfirmationComponent:
export default {
name: 'ConfirmationComponent',
mounted() {
this.$store.commit('updateEmail', this.senderEmail)
this.$store.commit('updateTerm', this.term)
},
watch: {
'form.name'(val) {
this.updateIframe()
},
'form.email'(val) {
this.updateIframe()
}
},
methods: {
updateIframe() {
this.$store.commit('updateForm', this.form)
}
}
}
then lastly the actual PreviewComponent:
import styles from '../../../templates/styles'
export default {
name: 'PreviewComponent',
mounted() {
this.$store.commit('stylesChange', styles)
},
computed: {
redemption_url() {
return `${window.config.stitcher_website}/gift?code=`
},
custom_message() {
if (this.form.message) {
let div = document.createElement('div')
div.innerHTML = this.form.message
let text = div.textContent || div.innerText || ''
return text.replace(/(?:\r\n|\r|\n)/g, '<br>')
}
return null
},
form() {
return this.$store.state.form
},
term() {
return this.$store.state.term
},
senderEmail() {
return this.$store.state.senderEmail
}
}
}
hopefully this will help somebody.
I'm implementing Vue paper dashboard sidebar. So I have something like this:
Into Index I have
<template>
<div>
AdminIndex
<side-bar>
</side-bar>
</div>
</template>
<script>
import { faBox, faImages } from '#fortawesome/fontawesome-free-solid';
import Sidebar from '#/components/sidebar/SideBar';
export default {
name: 'admin-index-view',
components: {
SideBar,
},
data() {
return {
showSidebar: false,
sidebarLinks: [
{
name: 'admin.menu.products',
icon: faBoxes,
route: { name: 'adminProducts' },
},
{
name: 'admin.menu.sliders',
icon: faImages,
route: { name: '/admin/stats' },
},
],
};
},
methods: {
displaySidebar(value) {
this.showSidebar = value;
},
},
};
</script>
SideBar component:
<template>
<div :class="sidebarClasses"
:data-background-color="backgroundColor"
:data-active-color="activeColor">
<!--
Tip 1: you can change the color of the sidebar's background using: data-background-color="white | black | darkblue"
Tip 2: you can change the color of the active button using the data-active-color="primary | info | success | warning | danger"
-->
<!-- -->
<div class="sidebar-wrapper"
id="style-3">
<div class="logo">
<a href="#"
class="simple-text">
<div class="logo-img">
<img src="static/img/vue-logo.png"
alt="">
</div>
Paper Dashboard
</a>
</div>
<slot>
</slot>
<ul :class="navClasses">
<!--By default vue-router adds an active class to each route link. This way the links are colored when clicked-->
<router-link v-for="(link,index) in sidebarLinks"
:key="index"
:to="link.route"
tag="li"
:ref="link.name">
<a>
<font-awesome-icon :icon="link.icon" />
<p v-t="link.name" />
</a>
</router-link>
</ul>
<moving-arrow :move-y="arrowMovePx">
</moving-arrow>
</div>
</div>
</template>
<script>
import FontAwesomeIcon from '#fortawesome/vue-fontawesome';
import MovingArrow from './MovingArrow';
export default {
name: 'side-bar',
components: {
MovingArrow,
FontAwesomeIcon,
},
props: {
type: {
type: String,
default: 'sidebar',
validator: value => {
const acceptedValues = ['sidebar', 'navbar'];
return acceptedValues.indexOf(value) !== -1;
},
},
backgroundColor: {
type: String,
default: 'black',
validator: value => {
const acceptedValues = ['white', 'black', 'darkblue'];
return acceptedValues.indexOf(value) !== -1;
},
},
activeColor: {
type: String,
default: 'success',
validator: value => {
const acceptedValues = [
'primary',
'info',
'success',
'warning',
'danger',
];
return acceptedValues.indexOf(value) !== -1;
},
},
sidebarLinks: {
type: Array,
default: () => [],
},
},
data() {
return {
linkHeight: 60,
activeLinkIndex: 0,
windowWidth: 0,
isWindows: false,
hasAutoHeight: false,
};
},
computed: {
sidebarClasses() {
if (this.type === 'sidebar') {
return 'sidebar';
}
return 'collapse navbar-collapse off-canvas-sidebar';
},
navClasses() {
if (this.type === 'sidebar') {
return 'nav';
}
return 'nav navbar-nav';
},
/**
* Styles to animate the arrow near the current active sidebar link
* #returns {{transform: string}}
*/
arrowMovePx() {
return this.linkHeight * this.activeLinkIndex;
},
},
watch: {
$route() {
this.findActiveLink();
},
},
methods: {
findActiveLink() {
this.sidebarLinks.find((element, index) => {
const found = element.path === this.$route.path;
if (found) {
this.activeLinkIndex = index;
}
return found;
});
},
},
mounted() {
this.findActiveLink();
},
};
</script>
I dont receive any issues or vue errors, sidebar just don't display. In Chrome console just return empty: <side-bar data-v-66018f3c=""></side-bar> Someone knows why sidebar is not binded? What I need to do to get correctly implementation of it? Regards
Chrome console error:
[Vue warn]: Unknown custom element: - did you register the
component correctly? For recursive components, make sure to provide
the "name" option.