前端应用_vue_利用子组件添加测试用例，然后让组建自动刷新展示

最新推荐文章于 2024-10-18 15:53:13 发布

上海_彭彭

最新推荐文章于 2024-10-18 15:53:13 发布

阅读量312

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue.js 文章标签： vue 自动刷新

本文链接：https://blog.youkuaiyun.com/qq_34979346/article/details/99683864

Vue.js 专栏收录该内容

46 篇文章

订阅专栏

本文介绍如何在Vue项目中使用本地存储(localStorage)保存和读取子组件传递的数据，实现页面刷新后数据的持久化显示。通过子组件触发父组件的方法更新数据列表，并展示了具体的HTML、CSS和JavaScript代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

总结下思路：

读取并保存子组件的传过来的对象，保存在localstorage 里
组建就可以在localstorage 里读取值，然后展示
解决自动刷新问题，就是用子组件通过 this.$emit(func) ,调取组建的展示方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
     <link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" >

   <link href="https://cdn.bootcss.com/flat-ui/2.3.0/css/flat-ui.min.css" rel="stylesheet">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"> </script>

</head>
<body>
<div id="pp">
    <div>
        <login @func="show"></login>
    </div>

    <div>

      <table class="table table-hover">
        <thead>
            <tr><th>用例名称</th><th>状态</th><th>负责人</th></tr>
        </thead>
        <tbody  v-for="item in list">

            <tr class="warning"><td>{{item.case_name}}</td><td>{{item.case_status}}</td><td>{{item.owner}}</td></tr>

        </tbody>
    </table>
</div>
</div>

<template id="tmp1">
    <div >
       <form role="form" >
  <div class="form-group">
    <label for="casename">用例名称</label>
    <div>
      <input type="text" v-model="name" class="form-control" id="casename" placeholder="请输入用例名称">
    </div>
  </div>
  <div class="form-group">
    <label for="casestatus" >用例状态</label>
    <div >
      <input type="text" v-model="status" class="form-control" id="casestatus" placeholder="请输入用例状态">
    </div>
  </div>
   <div class="form-group">
    <label for="owner" >用例负责人</label>
    <div>
      <input type="text"  v-model="owner" class="form-control" id="owner" placeholder="请输入用例负责人">
    </div>
  </div>
  <div class="form-group">
    <div >
      <input type="button"  @click="posdata" class="btn btn-primary" value="提交">
    </div>
  </div>
</form>

</div>
</template>
<script>
    var component={
        template:'#tmp1',
         data(){
                    return {
                        name:'',
                        status:'',
                        owner:''
                    };
                },
        methods:{
            posdata(){
                var data={case_name:this.name,case_status:this.status,owner:this.owner}
                var list= JSON.parse(localStorage.getItem('cst') || '[]')
                list.unshift(data)
                localStorage.setItem('cst', JSON.stringify(list))
                this.name=this.status=this.owner=''
                this.$emit('func')

            }

                }

    }
    var vue=new Vue(
        {
            el:'#pp',
            data:{
                list:[{case_name:'校验密码',case_status:'Pass',owner:'貂蝉'},{case_name:'校验用户名',case_status:'Fail',owner:'吕布'}]

            },
            created(){
                this.show()
            },
            methods: {
                show(){
                    this.list=JSON.parse((localStorage.getItem('cst'))|| '[]')

                }

            },
            components:{
                login:component,

            }
        }
    )
</script>
</body>
</html>