[英]How to modify a global variable from a mounted function? Vue.js
我是 Vue.js 的新手,在网上找不到答案。 我在 'mounted:' 中有一个函数,我需要它来更新全局变量。
这是代码:
<template>
<div id="MovieContent">
<h1>Content</h1>
<div class="movie-details-container">
<h3 class="movie-title">{{movieTitle}}</h3>
<IMG class="movie-poster" :src="moviePosterURL" alt=""/>
<p class="movie-description">{{movieDescription}}</p>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import { MdField } from 'vue-material/dist/components'
Vue.use(MdField);
const API_URL = 'http://www.omdbapi.com/?apikey=API_KEY&';
// eslint-disable-next-line no-unused-vars
const POSTER_API_URL = 'http://img.omdbapi.com/?apikey=API_KEY&';
const movieName = null;
const moviePoster = null;
const moviePlot = null;
export default {
data: () => ({
movieTitle: movieName,
moviePosterURL: moviePoster,
movieDescription: moviePlot
}),
methods: {
},
mounted: function () {
this.$root.$on('SEND_SEARCH_INPUT', (text) => {
async function fetchMovie(text) {
try {
const movieDetails = await fetch(API_URL + `t=${text}`);
const myJSON = await movieDetails.json();
// eslint-disable-next-line no-console
console.log(myJSON['Title']);
// eslint-disable-next-line no-console
console.log(myJSON['Year']);
// eslint-disable-next-line no-console
console.log(myJSON['Poster']);
// eslint-disable-next-line no-console
console.log(myJSON['Plot']);
} catch (error) {
// eslint-disable-next-line no-console
console.log(error)
}
}
fetchMovie(text)
})
}
}
</script>
<style>
</style>
我想要 'fetchMovie(text)' 来更新 -movieName -moviePoster -moviePlot。
我已经阅读了一段时间的文档,但没有任何帮助。 也许我没有理解如何从函数、组件和其他地方传递数据。
有什么建议吗? 多谢。
const movie = //your value
JavaScript 中的const关键字用于定义范围级别的常量。 const 变量不能重新赋值,必须在初始化时赋值。
const a;
a = 10;
这是荒谬的。 所以代替const使用let
let movie =//your value
它将声明一个范围级别的变量。 您可以在线阅读有关主题的更多信息。 就 vue 而言。
<script>
import Vue from 'vue';
import { MdField } from 'vue-material/dist/components' Vue.use(MdField);
const API_URL = 'http://www.omdbapi.com/?apikey=API_KEY&'; // eslint-disable-next-line no-unused-vars
const POSTER_API_URL = 'http://img.omdbapi.com/?apikey=API_KEY&';
let movieName = null;
let moviePoster = null;
let moviePlot = null;
export default {
data: () => ({ movieTitle: movieName, moviePosterURL: moviePoster, movieDescription: moviePlot }),
methods: { },
mounted: function () {
movieName = this.movieName;
moviePoster = this.moviePoster;
MoviePlot = this.moviePlot;
}
}
</script>
在对象内部使用此上下文来引用与 vue 关联的所有事物。
在 Vue 中,您可以直接修改组件数据中声明的任何内容。 将变量放在一个包含对象中是一种很好的做法。 它很干净,而且大多数情况下,如果覆盖了它正在监视的对象树的根,Vue 将无法跟踪更改,所以......
let vueStore = {
movieName:null,
moviePoster:null,
moviePlot:null,
}
export default {
data(){ return {vueStore: vueStore} },
methods: { },
mounted: function () {
this.vueStore.movieName = this.movieName;
this.vueStore.moviePoster = this.moviePoster;
this.vueStore.MoviePlot = this.moviePlot;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.