javascript - 在 Vue 之外使用时未定义变量
I am exporting a value from a JS file and using it in my Vue. I display the value like in my template, but I would like to also use this value elsewhere, outside of the template.
Here is a simplified ve
问题描述
I am exporting a value from a JS file and using it in my Vue. I display the value like in my template, but I would like to also use this value elsewhere, outside of the template.
Here is a simplified version of my setup and what I would like to achieve:
In my myJS.js (in actual app this file is used to call my API):
const appService = {
getPosts() {
return 123456;
}
}
export default appService
and then I have a VUE component that looks like this:
<template>
{{ info }}
</template>
alert(info);
import appService from '../myJS'
export default {
name: 'myvue',
props: {
msg: String
},
data () {
return {
info: {}
}
}
async created () {
this.info = await appService.getPosts();
}
}
The value is displayed in the template, but the alert(info) triggers a 'info is undefined' error.
How can I use this value in normal JavaScript outside of my template?
Hope that makes sense.
Thanks in advance!
How to fix footer in the end of the page?
I'm trying to fix the footer at the bottom of the page but I can't do that. I've already tried a lot of solutions that I found here on StackOverflow and other websites but none of them worked.
What I have right now is a sticky footer.
Here is the footer html (the footer tag is inside the body tag)
/*BODY*/
html,
body {
position: relative;
height: 100%;
margin: 0px 0px 50px 0px;
padding: 0;
}
/*FOOTER*/
#footer-logo {
position: absolute;
left: 20px;
top: 12.5px;
width: 61px;
height: 25px;
}
.master-footer-list {
list-style-type: none;
overflow: hidden;
padding: 0;
margin: 0;
}
.master-footer-list li {
display: inline-block;
vertical-align: middle;
padding-top: 17px;
padding-left: 15px;
}
.master-footer-list a:hover {
text-decoration: underline;
}
.master-footer-wrap {
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
footer {
font-family: var(--work-sans);
font-weight: 300;
font-size: 14px;
text-align: center;
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
footer div {
margin-bottom: 0px;
height: 50px;
width: 100%;
background-color: black;
}
footer a {
color: #FF6869;
text-decoration: none;
}
footer span {
color: #C8C7CC;
}
<footer>
<div class="master-footer-wrap">
<a href="/"><img id="footer-logo" src="/assets/images/logo-white.png" /></a>
<ul class="master-footer-list">
<li><span>© 2019 – iStudi. Todos os direitos reservados.</span></li>
<li><a href="/termos-de-uso">Termos de Uso</a></li>
<li><a href="/politica-de-privacidade">Política de Privacidade</a></li>
</ul>
</div>
</footer>
解决方案
基本上有两种方式：
将值分配给文件内部但组件定义外部的变量。所以在你的例子中你会说let info;并且在你的created()钩子中你会去this.info = info = await appService.getPosts()。
在导出之前将组件本身分配给变量：
const myComponent = { component definition... }
// Access with myComponent.info
export default myComponent;
然而！您将看到myComponent.info最初是undefined. 并且与模板不同，info当异步调用解决时， 的值不会响应式更新。反应魔法只在模板和实际组件的代码中起作用，例如在computed和watch属性中。如何优雅地处理异步加载的细节实际上取决于您希望如何使用此变量的细节。
最后：您不只是访问整个 .vue 文件中的变量的原因是因为在后台，模板编译为在组件上下文中执行的函数。为方便起见，组件的所有字段随后都可用作没有通常this前缀的变量。事实上，在您的模板中，info被视为this.info. this.info（请注意，您可以在模板中替换info它，它仍然可以使用。）此权限不适用于文件中的任何其他代码；那东西只是香草js代码。
推荐阅读
- r - R Shiny - Wordcloud2 打破下载按钮
- java - 使用反射修改 Java 8 上的注释值
- angular - @angular/common/http HttpClient 的 post 方法 awalys 返回错误？
- google-bigquery - Google BigQuery：在创建表时将日期添加到表名
- swift - NSView keyDown/keyUp 忽略 Swift 中的特定键。如何让它听所有的键？
- amazon-web-services - 当数据库中仍有结果时，DynamoDB 返回 null nextToken
- reactjs - React Js / 在带有状态的 jsx 上使用 setTimout
- java - Spring MVC：更新现有实体
- sql-server - 如果 2 条记录之一大于零，则编写子查询以显示当前薪水日期
- python - 如果它包含熊猫数据框中的子字符串，则替换整个字符串，但使用值列表
I am exporting a value from a JS file and using it in my Vue. I display the value like in my template, but I would like to also use this value elsewhere, outside of the template.
Here is a simplified ve
问题描述
I am exporting a value from a JS file and using it in my Vue. I display the value like in my template, but I would like to also use this value elsewhere, outside of the template.
Here is a simplified version of my setup and what I would like to achieve:
In my myJS.js (in actual app this file is used to call my API):
const appService = {
getPosts() {
return 123456;
}
}
export default appService
and then I have a VUE component that looks like this:
<template>
{{ info }}
</template>
alert(info);
import appService from '../myJS'
export default {
name: 'myvue',
props: {
msg: String
},
data () {
return {
info: {}
}
}
async created () {
this.info = await appService.getPosts();
}
}
The value is displayed in the template, but the alert(info) triggers a 'info is undefined' error.
How can I use this value in normal JavaScript outside of my template?
Hope that makes sense.
Thanks in advance!
I'm trying to fix the footer at the bottom of the page but I can't do that. I've already tried a lot of solutions that I found here on StackOverflow and other websites but none of them worked.
What I have right now is a sticky footer.
Here is the footer html (the footer tag is inside the body tag)
/*BODY*/
html,
body {
position: relative;
height: 100%;
margin: 0px 0px 50px 0px;
padding: 0;
}
/*FOOTER*/
#footer-logo {
position: absolute;
left: 20px;
top: 12.5px;
width: 61px;
height: 25px;
}
.master-footer-list {
list-style-type: none;
overflow: hidden;
padding: 0;
margin: 0;
}
.master-footer-list li {
display: inline-block;
vertical-align: middle;
padding-top: 17px;
padding-left: 15px;
}
.master-footer-list a:hover {
text-decoration: underline;
}
.master-footer-wrap {
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
footer {
font-family: var(--work-sans);
font-weight: 300;
font-size: 14px;
text-align: center;
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
footer div {
margin-bottom: 0px;
height: 50px;
width: 100%;
background-color: black;
}
footer a {
color: #FF6869;
text-decoration: none;
}
footer span {
color: #C8C7CC;
}<footer>
<div class="master-footer-wrap">
<a href="/"><img id="footer-logo" src="/assets/images/logo-white.png" /></a>
<ul class="master-footer-list">
<li><span>© 2019 – iStudi. Todos os direitos reservados.</span></li>
<li><a href="/termos-de-uso">Termos de Uso</a></li>
<li><a href="/politica-de-privacidade">Política de Privacidade</a></li>
</ul>
</div>
</footer>基本上有两种方式：
将值分配给文件内部但组件定义外部的变量。所以在你的例子中你会说
let info;并且在你的created()钩子中你会去this.info = info = await appService.getPosts()。在导出之前将组件本身分配给变量：
const myComponent = { component definition... }
// Access with myComponent.info
export default myComponent;
然而！您将看到myComponent.info最初是undefined. 并且与模板不同，info当异步调用解决时， 的值不会响应式更新。反应魔法只在模板和实际组件的代码中起作用，例如在computed和watch属性中。如何优雅地处理异步加载的细节实际上取决于您希望如何使用此变量的细节。
最后：您不只是访问整个 .vue 文件中的变量的原因是因为在后台，模板编译为在组件上下文中执行的函数。为方便起见，组件的所有字段随后都可用作没有通常this前缀的变量。事实上，在您的模板中，info被视为this.info. this.info（请注意，您可以在模板中替换info它，它仍然可以使用。）此权限不适用于文件中的任何其他代码；那东西只是香草js代码。