组件通信时,已获取到数据,但页面数据没有更新渲染
<template>
<div class="box">
<ul>
<li v-for="item in books" :key="item.id">
<h4>{{item.title}}</h4>
<img :src="item.img" alt="">
</li>
</ul>
</div>
</template>
<script>
import Mock from 'mockjs'
const list = Mock.mock({
'books|4':[{
id:'@id()',
img:'@dataImage(200x100,"Demo")',
text:'@cparagraph(3,5)',
title:'@ctitle(3,6)'
}
]
})
export default {
name: 'Home',
props:{
},
data() {
return {
books:list.books
};
},
methods:{
send(){
this.$bus.$emit('getBooks', this.books);
console.log('已发送');
}
},
mounted() {
},
created() {
this.send()
},
};
</script>
另一个组件
<template>
<div>
<div class="box">
<div class="control">
<span>添加图书</span>|<span>修改图书</span>
</div>
<div>
请输入要查询的id:<input type="text" v-model="keywords">
</div>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td>id</td>
<td>名称</td>
</tr>
<tr v-for="b in books" :key="b.id">
<td>{{b.id}}</td>
<td>{{b.title}}</td>
</tr>
</table>
</div>
</div>
</template>
<script>
export default {
name: 'About',
data() {
return {
books:'',
keywords:''
};
},
mounted() {
},
methods: {
},
created() {
this.$bus.$on('getBooks',data=>{
this.books = data.concat()
console.log(this.books);
})
},
};
</script>
books:'' 改成books:[]
for循环没渲染,
简单粗暴:this.$forceUpdate() 在books赋值的地方加个强制刷新
this.$bus.$on('getBooks',data=>{
this.books = data.concat()
this.$forceUpdate()
console.log(this.books);
})
books 是各数组 。你现在是 字符串