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)
Related
I'm a little bit confused with Nuxt 3 and the lifecycle of when it gets data. I understand that it's a universal rendering process, but I'm using Strapi 4 to manage content in my Nuxt 3 project and only occasionally do I retrieve the data via useFetch. The API route from Strapi never goes down so I'm probably just doing something wrong.
Here is my Vue file in Nuxt:
<script setup lang="ts">
const {data: works, pending, error} = await useFetch("http://localhost:1337/api/works", {
params: {
populate: "*"
}
});
</script>
<template>
<div>
<div v-for="work in works">
... do something
</div>
</div>
</template>
I'm not sure how to get the content when the page loads. When I log the error returned, it's just true. But it's only sometimes. The content will load once, and then as soon as I refresh the page, it goes back to having an error. So I'm thinking something is getting cached maybe client-side? I'm really not sure what to do next.
Try passing this option to useFetch: initialCache: false. See more
I'm currently developing a universal app using Nuxt.js, the data on most of the pages is retrieved from an API using a fetch hook as well as vuex store. I started noticing errors on page reload/refresh and sometimes when I visit a page from the navbar. The page error is:
TypeError: Cannot read property 'data' of undefined
where data is an object retrieved from an API. I have searched around the internet for this and found it has something to do with data not being loaded or page rendering whilst the data is not fully retrieved. i have found a work around by using a v-if on my template to check if the data is set then display the contents. my question is if there is a way to achieve this, i have tried using the async/await keywords but it doesn't help and i feel like the v-if method is not the best way to handle it.
edit: solved by using $fetchState.pending when using fetch()
If in your template you display right away the data you retrieve from the API, then indeed using the v-if is the right way to do.
If you are using the new fetch() hook, then in your template you can use $fetchState.pending to check if the loading has finished, for example:
<div v-if="$fetchState.pending">
<p> Content is loading... </p>
</div>
<div v-else>
<p> Content has loaded! {{data}}</p>
</div>
<script>
export default{
data(){
return{
data: null
}
}
async fetch(){
this.data = await getSomeAPI
}
}
</script>
Is it possible to add custom errors into the ErrorBag
I am using nuxtjs. i have registered vee-validate into my plugin via nuxt.config.js
It works fine However
I want to use the same error code within the template
ex:
<template>
<div v-if="errors.all().length>0">
//loop through
</div>
</template>
i am using axios to fetch user information.
if the request doesnt return my expected data set. i was thinking i could simply
this.errors.push('this is my error message') //-> or some variant of this
When i do this i get that this.errors.push is not a function
I know that
this.errors = ErrorBag{ __ob__: Observer} //-> has items and a vmId attributes
If i amend the code to push onto ErrorBag i get push of undefined
It is documented in the API of ErrorBag. You can add custom messages such as:
// For example, you may want to add an error related to authentication:
errors.add({
field: 'auth',
msg: 'Wrong Credentials'
});
Check the documentation here for more info: https://vee-validate.logaretm.com/v2/api/errorbag.html
I'm trying to implement VueJS in one of my pages blade template. I just want to use Vue in that single template.
I tried the following:
default.blade.php
//...
#yield('js-for-layout-before')
<script src="{{ asset('js/vue.min.js') }}"></script>
// ...
view.blade.php
#extends('layouts.default')
//...
#section('content')
<div id="app">
<ol>
<todo-item></todo-item>
</ol>
<p>#{{ message }}</p>
</div>
<script type="module" src="{{ asset('js/pages/vue_component.js') }}"></script>
#stop
vue_component.js
Vue.component('todo-item', {
template: '<li>This is a list item</li>'
})
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
With this, I am only getting a blank page. There are no errors in the console, all files are loaded.
The inspector shows what I mean:
I do not want to implement a build step or anything, just a minimum setup with vue. Any ideas what I am missing here?
--UPDATE:
I replaced vue.min.js with the development version and finally got a clue:
vue.js:633 [Vue warn]: It seems you are using the standalone build of
Vue.js in an environment with Content Security Policy that prohibits
unsafe-eval. The template compiler cannot work in this environment.
Consider relaxing the policy to allow unsafe-eval or pre-compiling
your templates into render functions.
For reference, the issue was that my CSP didn't allow for unsafe-eval, which is required in this scenario without a build step. I didn't notice this until I included vue.js instead of the minified vue.min.js, which doesn't show errors.
To fix this for now, I did the following, though you should probably not do this in production: Check where your CSP is defined and add 'unsafe-eval' to "script-src".
In production, you probably want to use nonce on the script instead of unsafe-eval and something like https://github.com/spatie/laravel-csp to generate the nonce.
I'm a newbie to both these frameworks and the first thing I found is a conflict. So because the double curly brackets are reserved by Tornado, I changed the Vue's default ones to single ones:
new Vue({
el: '#app',
delimiters: ['${', '}'],
data: {
message: 'Hello Vue.js!'
}
Template:
<td>${ message }</td>
But now it's just not rendered, what I see in a browser is:
${ message }
How to solve this conflict? Am I doing something wrong?
Thanks!
UPD I figured it out. I did several things wrong:
1) I put the script at the "head" section instead of the very end.
2) I didn't add id="app" attribute to some parent element to specify the app object.
After I changed the code everything started working.
Another way to combine Tornado with another template system that uses double-braces is to escape the ones that are to be handled by javascript with {{!:
<h1>This variable comes from Tornado: {{ x }}</h1>
<p>This one comes from Vue: {{! y }}</p>
Tornado's rendering will remove the exclamation point and leave the double braces for Vue to use.
I encountered that as well. This is what worked for me.
Put this in your main.js. N.B you can specify the delimiters to suit your needs
Vue.mixin({ delimiters: ['[[',']]'] })
The in your html you can use it as it is. e.g
<td>[[ message ]]</td>