vue的data里面的值是数组时,在更改其某一项的时候,怎么触发视图的重新渲染

1. 设置对象或数组的值:Vue.set(target,key,value) ;
2.删除对象或数组中元素: Vue.delete ( target,key) ;
3. 数组对象直接修改属性,可以触发视图更新:
this.array[0].show = true;
4.splice方法修改数组,可以触发视图更新:
this.array.splice(indexOfItem, 1, newElement)
5.数组整体修改,可以触发视图更新:
var tempArray = this.array;
tempArray[0].show = true;
this.array = tempArray;
6.用Object.assign或lodash.assign可以为对象添加响应式属性,
可以触发视图更新:
7.Vue提供了如下的数组的变异方法,可以触发视图更新:
push()/pop()/shift()/unshift()/splice() /sort()/reverse()

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue中,如果父组件要将一个数组传递给子组件,并且子组件需要将其赋给临变量form.tableData,并触发表格(table)的视图更新,你可以使用props将数组传递给子组件,并在子组件中将其赋data属性中的form.tableData。同,在子组件的模板中,使用v-for指令遍历form.tableData渲染表格。 下面是一个示例,展示了父组件向子组件传递一个名为"tableData"的数组,并在子组件中将其赋data属性中的form.tableData,并触发表格的视图更新: 父组件: ```vue <template> <div> <ChildComponent :tableData="parentTableData" /> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { data() { return { parentTableData: ['Apple', 'Banana', 'Orange'], }; }, components: { ChildComponent, }, }; </script> ``` 子组件: ```vue <template> <div> <table> <thead> <tr> <th>Item</th> </tr> </thead> <tbody> <tr v-for="item in form.tableData" :key="item"> <td>{{ item }}</td> </tr> </tbody> </table> </div> </template> <script> export default { props: ['tableData'], data() { return { form: { tableData: [], }, }; }, watch: { tableData(newValue) { this.form.tableData = newValue; }, }, }; </script> ``` 在上述示例中,父组件通过`:tableData="parentTableData"`将"parentTableData"数组传递给子组件的props。子组件接收到这个数组后,通过watch监听`tableData`的变化,并在变化将其赋data属性中的form.tableData。在子组件的模板中,我们使用`v-for`指令遍历form.tableData数组,并为每个数组项指定一个`key`,以确保在数组发生变化可以正确地更新表格的视图。 请注意,父组件中的数组改变,子组件的props也会相应地更新,watch会监听这个变化并将新赋给form.tableData触发表格的视图更新。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值