[英]Values in array are updated correctly but a different component is being removed
[英]Component's values not being updated
我创建了一个Vue应用,其中有一个HTTP请求。 数据返回后,我将更新配置文件值。 但是,使用此值的所有组件都不会重新加载。 下面的代码可以更好地解释我要完成的工作。
我有主Vue文件App.vue:
<template>
<div id="app">
<Navigation />
<Header :profile="profile" />
<About :profile="profile" />
<Services :profile="profile" />
</div>
</template>
<script>
import Navigation from './components/Navigation.vue'
import Header from './components/Header.vue'
import About from './components/About.vue'
import Services from './components/Services.vue'
export default {
name: 'app',
components: {
Navigation,
Header,
About,
Services,
},
data() {
return {
profile: { }
}
},
created() {
this.getUserProfile()
},
methods: {
getUserProfile: async function() {
try {
const response = await fetch('http://localhost:7070/v1/home');
const data = await response.json();
this.profile = data;
} catch (error) {
console.error(error);
}
}
}
}
</script>
<style>
</style>
如您所见,我一开始将变量配置文件设置为空对象。 一旦应用程序进入挂载状态,我就可以通过GET请求检索配置文件数据。 调试时,我可以清楚地看到数据不是空对象。 响应包含所有数据。
从应用程序文件中可以看到,我导入了4个文件,将4个组件添加到应用程序中。 所有组件均以相同的原理完成。
以下是navigation.vue的内容:
<template>
<nav class="navbar navbar-expand-lg navbar-light fixed-top py-3" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top">Home</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto my-2 my-lg-0">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#services">Services</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#career">Career</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</template>
<script>
</script>
<style scoped>
</style>
组件header.vue:
<template>
<header class="masthead">
<div class="container h-100">
<div class="row h-100 align-items-center justify-content-center text-center">
<div class="col-lg-10 align-self-end">
<h1 class="text-uppercase text-white font-weight-bold">{{ fullName }}</h1>
<h2 class="text-uppercase text-white font-weight-bold">{{ profession }}</h2>
<hr class="divider my-4">
</div>
<div class="col-lg-8 align-self-baseline">
<p class="text-white-75 font-weight-light mb-5">{{ oneLiner }}</p>
<a class="btn btn-primary btn-xl js-scroll-trigger" href="#about">Find Out More</a>
</div>
</div>
</div>
</header>
</template>
<script>
export default {
props: {
profile: Object
},
computed: {
fullName: function () {
if (typeof(profile) == 'undefined') {
return 'Jernej Klancic';
}
return profile.firstname + ' ' + profile.lastname;
},
profession: function() {
if (typeof(profile) == 'undefined') {
return 'Developer';
}
return profile.profession;
},
oneLiner: function() {
if (typeof(profile) == 'undefined') {
return '';
}
return profile.oneLiner;
}
}
}
</script>
<style scoped>
</style>
组件about.vue:
<template>
<section class="page-section bg-primary" id="about">
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-8 text-center">
<h2 class="text-white mt-0">About</h2>
<hr class="divider light my-4">
<p class="text-white-50 mb-4">{{ aboutMe }}</p>
<a class="btn btn-light btn-xl js-scroll-trigger" href="#services">Expertise</a>
</div>
</div>
</div>
</section>
</template>
<script>
export default {
props: {
profile: Object
},
computed: {
aboutMe: function () {
if (typeof(profile) == 'undefined') {
return '';
}
return profile.aboutMe;
}
}
}
</script>
<style scoped>
</style>
组件service.vue:
<template>
<section class="page-section" id="services">
<div class="container">
<h2 class="text-center mt-0">At Your Service</h2>
<hr class="divider my-4">
<div class="row">
<div v-for="skill in skills" v-bind:key="uuid" class="col-lg-3 col-md-6 text-center">
<div class="mt-5">
<i v-bind:class="fontAwesomeDecorator(skill)"></i>
<h3 class="h4 mb-2">{{ skill.type }}</h3>
<p class="text-muted mb-0">{{ skillLevel(skill) }}</p>
</div>
</div>
<div class="col-lg-3 col-md-6 text-center">
<div class="mt-5">
<i class="fas fa-4x fa-laptop-code text-primary mb-4"></i>
<h3 class="h4 mb-2">Other</h3>
<p class="text-muted mb-0">Always eager to learn new language or framework</p>
</div>
</div>
</div>
</div>
</section>
</template>
<script>
export default {
props: {
profile: Object
},
computed: {
skills: function () {
if (typeof(profile) == 'undefined') {
return [];
}
return profile.favoriteExpertise.proficient.slice(0, 3);
}
},
methods: {
fontAwesomeDecorator: function(skill) {
var style = ['fab', 'fa-4x', 'text-primary', 'mb-4'];
var uppercase = skill.type.toUpperCase();
if (uppercase === 'JAVA') {
style.push('fa-java');
}
if(uppercase === 'JAVASCRIPT') {
style.push('fa-js');
}
if(uppercase === 'ANDROID') {
style.push('fa-android');
}
return style;
},
skillLevel: function(skill) {
switch(skill.rating) {
case 10:
return `Living and breathing ${skill.type} code`;
case 9:
return `${skill.type} marksmen`;
case 8:
return `Bug slayer in the ${skill.type} realm`;
case 7:
return `${skill.type} fanboy`;
case 6:
return `Level ${skill.rating} ${skill.type} wizard`;
case 5:
return `${skill.type} nerd`;
default:
return `${skill.type} motivator stage ${skill.type}`;
}
}
}
}
</script>
<style scoped>
</style>
谁能告诉我可能出什么问题了? 我应该改变方式吗? 在Vue中有更好的方法吗? 如前所述,我从后端检索配置文件JSON对象。 我使用this.profile = data;
重新分配了profile变量this.profile = data;
在App.vue中。 是否应该不会触发数据重新加载?
您需要在组件的JavaScript部分中使用this.profile
访问profile
。
例如,这将不起作用:
skills: function () {
if (typeof(profile) == 'undefined') {
return [];
}
return profile.favoriteExpertise.proficient.slice(0, 3);
}
不仅需要profile
还需要编写this.profile
。
删除this.
模板中的内容不会转移到其他位置。 这是模板语言的特有功能。 在<script>
部分中,您需要包括this.
就像使用其他任何JavaScript代码一样。 道具,数据,计算的属性和方法都以这种方式作为Vue实例的属性进行访问。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.