I'm implementing a form page with Vue.js using Single File Components.
The functionality is working as intended but on the Javascript console I have this error showing multiple times when using HTML Select elements:
# vue.runtime.esm.js:1888
TypeError: this.each is not a function
at HTMLOptionsCollection.collect (prototype.js:251)
at inserted (vue.runtime.esm.js:7842)
at Do (vue.runtime.esm.js:6674)
at l (vue.runtime.esm.js:6613)
at s (vue.runtime.esm.js:2235)
at ne (vue.runtime.esm.js:1854)
at Object.n [as insert] (vue.runtime.esm.js:2175)
at $ (vue.runtime.esm.js:6340)
at Or.__patch__ (vue.runtime.esm.js:6559)
at Or.Ln.t._update (vue.runtime.esm.js:3939)
I narrowed it down the the Select elements. Removing them makes the errors disapear.
Searching Google for this error did not provide any relevant information.
This is the relevant section of the HTML:
<select class="fieldcontent" v-model="oldNumber" >
<option v-for="hn in houseNumbers" :key="hn.oldNumber">{{hn.oldNumber}}
</option>
</select>
The select options are populated from a "houseNumbers" object (in a Vuex store) in the format:
[{
"oldNumber": "14",
"newNumber": ""
},{
"oldNumber": "15",
"newNumber": ""
},{
"oldNumber": "17",
"newNumber": ""
}]
I get them on the component via a computed property:
computed: {
...mapState(['houseNumbers'])
},
The HTML Select is binded to the local data of that component, shown below:
data() {
return {
newNumber: null,
oldNumber: null
}
},
This error is thrown both when the component renders and also when I click to change the selected option.
Is there anything I can do to fix this console errors?
Is this an know issue?
The Vue code is running alongside an old application with Struts 1.2 and JSPs, and this application is importing a prototype.js version older than 1.7
Related
I am currently using Astro SSR with Fastify\Node as my server. I created a SSR\Fastify plugin and its working well. I am running into one issue though,and wanted to see if others have faced similar issue. I am not able to use the React-Select component. It works well when running normal Astro-Build without SSR enabled. Once I run the build command I received the following error message when the page tries to load:Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object."
I am leaning towards import issue, but not having any luck narrowing it down.
The type definition is resolving to: react-select/dist/react-selectcjs.d.ts
I get the same error if I use the node ssr plugin as well. I'm not doing anything fancy with the JSX component, this is usage of the react-select:
import Select from "react-select"s
<Select
className="react-select info mx-5 w-100"
classNamePrefix="react-select"
name="singleSelect"
value={pageSelect}
onChange={(value) => {
gotoPage(value.value);
handlePageSelect(value);
}}
options={pageSelectData.map((prop, key) => {
return {
value: key,
label: "Page " + (key + 1),
};
})}
placeholder="Select page"
/>
<Select
className="react-select info mx-5 w-100"
classNamePrefix="react-select"
name="singleSelect"
value={numberOfRows}
onChange={(value) => {
console.log(value);
setPageSize(value.value);
setNumberOfRows(value);
}}
options={numberOfRowsData.map((prop) => {
return {
value: prop,
label: prop + " rows",
};
})}
placeholder="Select #rows"
/>
I found the issue:
I have astro layouts for the following:
SideBarLayout
NavBarLayout
BaseLayout
PageLayout
ContainerLayout
BlocksLayout
BlockLayout
FormLayout
Each of these also leverage a Jsx component. My ContainerLayout and SideBar was missing the client:load value. After correcting that, my forms load properly with event logic and everything and runs withing fastify sever.
I'm using Sanity.io, GatsbyJS 3.x
Watch mode works great when you update content in the CMS, except for when the content you edit is part of a referenced schema of type 'document'.
Put another way, changes made to a document referenced by another document will not re-render the page despite having watch mode on and configured properly.
For example, here is a snippet from my Page schema.
...
{
name: "content",
type: "array",
title: "Page Sections",
description: "Add, edit, and reorder sections",
of: [
{
type: 'reference',
to: [
{ type: 'nav' },
{ type: 'section' },
{ type: 'footer' }
]
}
],
},
...
The above schema references a
nav schema
section schema
footer schema
Each of these are type 'document'.
See the example below.
export default {
type: 'document',
name: 'section',
title: 'Page Sections',
fields: [
{
name: 'meta',
title: 'Section Meta Data',
type: 'meta'
},
...
I want to reference a document, rather than an object, because I need to use the content created based on these schemas to be re-used in throughout the application.
Finally, I've configured the source plugin correctly for watch mode.
Gatsby Config is set properly
{
resolve: `gatsby-source-sanity`,
options: {
projectId: `asdfasdf`,
dataset: `template`,
watchMode: true,
overlayDrafts: true,
token: process.env.MY_SANITY_TOKEN,
},
},
In the CMS / Studio, when you edit one of the fields, you can see Gatsby re-compile in dev mode from the terminal. However, the page does not auto reload and display the changes made to the referenced document.
I've tried reloading the page with the reload button and via hard refresh, the changes do not render.
The only way to render the changes is to go back to the CMS and edit a field on the main “Page” document. Then it refreshes immediately.
Am I doing something wrong? Is this expected behavior? Is there a way to get this to work?
For those that run across this issue, I was able to answer my own question. I hope this saves you the day's it took me to find a solution.
Solution TLDR
You need to explicitly query the referenced document in order for watch mode to work properly.
Details with Examples
Summary
The gatsby-source-sanity plugin provides convenience queries that start with _raw for array types. When you use the _raw query in your GraphQL query, it will not trigger watch mode to reload the data. You need to explicitly query the referenced document in order for watch mode to work properly. This may have to do with how the plugin sets up listeners and I don't know if this is a bug or a feature.
Example
My Page Document has the following schema
{
name: "content",
type: "array",
title: "Page Sections",
description: "Add, edit, and reorder sections",
of: [
{
type: "reference",
to: [
{ type: "nav" },
{ type: 'section' },
],
},
],
},
The section is a reference to a section document.
{ type: 'section' }
The reason I'm not using an object is because I want the page sections to be re-usable on multiple pages.
Assuming you have watch mode enabled properly in your gatsby-config.js file, watch mode, like so...
// gatsby-config.js
{
resolve: `gatsby-source-sanity`,
options: {
projectId: `asdf123sg`,
dataset: `datasetname`,
watchMode: true,
overlayDrafts: true,
token: process.env.SANITY_TOKEN,
},
},
Then you should see the following behavior:
listen for document/content updates
re-run queries, update the data, hot-reload the page
You'll see the following scroll in your terminal window.
success Re-building development bundle - 1.371s
success building schema - 0.420s
success createPages - 0.020s
info Total nodes: 64, SitePage nodes: 9 (use --verbose for breakdown)
success Checking for changed pages - 0.001s
success update schema - 0.081s
success onPreExtractQueries - 0.006s
success extract queries from components - 0.223s
success write out requires - 0.002s
success run page queries - 0.010s - 1/1 99.82/s
This works great if you are querying the main document or any referenced objects. However, if you are querying any references to another document then there is one gotcha you need to be aware of.
The Gotcha
When you use the _raw query in your GraphQL query, it will not trigger watch mode to reload the data. You need to explicitly query the referenced document in order for watch mode to work properly.
Example: This Query will NOT work
export const PageQuery = graphql`
fragment PageInfo on SanityPage {
_id
_key
_updatedAt
_rawContent(resolveReferences: {maxDepth: 10})
}
`
Example: This query WILL Work
export const PageQuery = graphql`
fragment PageInfo on SanityPage {
_id
_key
_updatedAt
_rawContent(resolveReferences: {maxDepth: 10})
content {
... on SanitySection {
id
}
}
}
`
This additional query is the key
Here is where I am explicitly querying the document that is being referenced in the 'content' array.
content {
... on SanitySection {
id
}
}
You don't actually need to use the data that results from that query, you simply need to include this in your query.
My guess is that this informs the gatsby-source-sanity plugin to set up a listener, whereas the _rawContent fragment does not.
Not sure if this is a feature, bug, or just expected behavior. At the time of writing the versions were as follows.
"gatsby": "3.5.1",
"gatsby-source-sanity": "^7.0.0",
I am working chrome extension which uses vue. I have found that google can take a while to publish updates, so there is some content that I would like to be able to edit with a json that is called by the extension via a $.getJSON https request. So far, that has worked pretty well for getting raw text. But I have problems when I try to add a span tag with a v-if statement such as the following:
Thank you for meeting. We have prepared the following <span v-if='docCount.length > 0'>documents</span><span v-else>document</span> for you today:
What happens is that it just says "prepared the following 'documentsdDocuments'" as if it takes all to be true.
I have gotten this result after putting the above JSON text in a v-html as follows:
<p v-html="coverLetterContent['p1']"></p>
I have gotten the same result after trying the following:
.bind(this)).then( function (result){
$(".letter-body").append("<p>"+result["letter"]["p1"]+"</p>")
});
I also tried creating a dynamic component as follows but was getting an error and nothing was rendered:
dynamicComponent: function() {
return {
template: `<p>${coverLetterContent["p1"]}</p>`,
methods: {
someAction() {
console.log("Action!");
}
}
}
}
The error I got on this was: "ReferenceError: coverLetterContent is not defined." coverLetterContent is defined in the vue app data and is accessible via the v-html call described above.
I am trying to upload a file in my form using the bootstrap-vue form file component
template
<b-form-group id="userInputGroup8" label="User Picture:">
<b-form-file id="userPictureInput" ref="fileinput" #input="userPictureSelected" v-model="userPictureFile" choose-label="Select" accept=".jpg, .png"></b-form-file>
<br> Selected file : {{ userPictureFile.name }}
</b-form-group>
Once the file is selected , the name is displayed in the browser, but it does not appear in the input field, and even if the userPictureSelected method is fired, I don't get its value in the console
script
data () {
return {
...
userPictureFile: '',
}
},
methods: _.extend({}, mapActions(['createUser']), {
userPictureSelected: () => {
console.log('Selected: ', this.userPictureFile.name)
}
}
I get the error
[Vue warn]: Error in event handler for "input": "TypeError: _this2.userPictureFile is undefined"
What could be wrong ? where can I get a good and recent example for uploading such file into my server backend static files directory ?
thanks for update
seems to be an issue not yet solved with bootstrap-vue
Custom input file after choice file nothing change.
I'm using vue#2.1.3 and the vue official webpack template to build an app.
When developing locally, I often see the warning Uncaught TypeError: Cannot read property ... of undefined, but the HTML can be rendered successfully. However, the HTML can't be rendered when it's deployed to Netlify with npm run build command. So I have to treat this warning seriously.
I learned from here that it's because "the data is not complete when the component is rendered, but e.g. loaded from an API." and the solution is to "use v-if to render that part of the template only once the data has been loaded."
There are two questions:
I tried wrap v-if around multiple statements that's generating the warning but personal I think this solution is verbose. Is there a neat approach?
"warnings" in local development turn into "fatal errors"(HTML can't be rendered) in production. How to make them the same? e.g. both of them issue warnings or errors?
Just use v-if on a common parent to all the elements in your template relying on that AJAX call, not around each one.
So instead of something like:
<div>
<h1 v-if="foo.title">{{ foo.title }}</h1>
<p v-if="foo.description">{{ foo.description }}</p>
</div>
Do
<div>
<template v-if="foo">
<h1>{{ foo.title }}</h1>
<p>{{ foo.description }}</p>
</template>
</div>
have you tried to initialize all the data you need? e.g. if you need a b c, you can do:
new Vue({
data: {
a: 1,
b: '',
c: {}
},
created(){
// send a request to get result, and assign the value to a, b, c here
}
})
In this way you wont get any xx is undefined error
Guys are right but I can add something.
If there is possibility that your root element in the condition can be undefined for some reason, it is good practice to use something like that: v-if='rootElement && rootElement.prop'. It will secure you from getting cannot get property prop of undefined as when rootelement is undefined, it will not go further in checking.
2021 vue3
we can use like this
props: {
form: {
type: String,
required: true,
},
setup(props, context) {
console.log(props.form)