组件之间的数据通信问题
组件之间的数据通信问题
提问于 2019-04-23 03:06:05
我有一个页面，上面有一个页眉，输入是搜索引擎、帖子列表和分页。我决定将这个文件的头文件移到一个单独的vue文件中的一个单独的组件中。在我这样做之后，按标题搜索帖子就停止了，我现在也不能添加帖子了。我认为我需要为我新创建的组件导入我的帖子到一个新文件中，但是如何做到这一点。
My code when it worked(before my changes)
更改后，我的代码不能工作：
我的帖子所在的文件：
<template>
<div class="app">
<ul>
<li v-for="(post, index) in paginatedData" class="post" :key="index">
<router-link :to="{ name: 'detail', params: {id: post.id, title: post.title, body: post.body} }">
<img src="src/assets/nature.jpg">
<p class="boldText"> {{ post.title }}</p>
</router-link>
<p> {{ post.body }}</p>
</li>
</ul>
<div class="allpagination">
<button type="button" @click="page -=1" v-if="page > 0" class="prev"><<</button>
<div class="pagin">
<button class="item"
v-for="n in evenPosts"
:key="n.id"
v-bind:class="{'selected': current === n.id}"
@click="page=n-1">{{ n }} </button>
</div>
<button type="button" @click="page +=1" class="next" v-if="page < evenPosts-1">>></button>
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
name: 'Pagination',
data () {
return {
search: '',
current: null,
page: 0,
posts: [],
createTitle: '',
createBody: '',
visiblePostID: '',
}
},
watch: {
counter: function(newValue, oldValue) {
this.getData()
}
},
created(){
this.getData()
},
computed: {
evenPosts: function(posts){
return Math.ceil(this.posts.length/6);
},
paginatedData() {
const start = this.page * 6;
const end = start + 6;
return this.posts.filter((post) => {
return post.title.match(this.search);
}).slice(start, end);
},
},
methods: {
getData() {
axios.get(`https://jsonplaceholder.typicode.com/posts`).then(response => {
this.posts = response.data
})
},
}
}
</script>标题vue：
AddPost
<script>
import axios from 'axios';
export default {
name: 'Pagination',
data () {
return {
search: '',
current: null,
posts: [],
createTitle: '',
createBody: '',
}
},
created(){
this.getData()
},
methods: {
getData() {
axios.get(`https://jsonplaceholder.typicode.com/posts`).then(response => {
this.posts = response.data
})
},
addPost() {
axios.post('http://jsonplaceholder.typicode.com/posts/', {
title: this.createTitle,
body: this.createBody
}).then((response) => {
this.posts.unshift(response.data)
})
},
}
}
</script>App.vue：
<template>
<div id="app">
<header-self></header-self>
<router-view></router-view>
</div>
</template>
<script>
export default {
components: {
name: 'app',
}
}
</script>回答 1
Stack Overflow用户
发布于 2019-04-23 12:58:22
您的"posts“组件中有一个依赖于变量this.search的计算属性paginatedData
paginatedData () {
const start = this.page * 6;
const end = start + 6;
return this.posts.filter((post) => {
return post.title.match(this.search);
}).slice(start, end);
},但是该组件中的this.search值不会更新，因为您将填充该值的搜索输入移动到了header组件中。
现在需要做的是确保将更新后的搜索值传递到“paginatedData”组件中，以便paginatedData computed属性检测更改并计算新的posts值。
您现在遇到了在可能没有父/子关系的组件之间传递值的需求。
在您的场景中，我将考虑使用Vue文档中描述的一些Simple State Management来处理此需求。
根据你的应用程序的规模，可能值得为状态管理实现Vuex。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55799729
复制相关文章
相似问题
腾讯云开发者
