zoukankan      html  css  js  c++  java
  • 下拉框筛选数据,父子组件传值

    父组件:

    <template>
      <div class="about">
          科目查询<br /><br />
          <select v-model="selected">
              <option>请选择</option>
              <option v-for="(item,index) in data" :key="index">{{item.name}}</option>
          </select><br /><br />
          <ShowMessage :name="newdata.name" :info="newdata.info" :list="newdata.list"></ShowMessage>
      </div>
    </template>
    <script>
    import ShowMessage from "../1.4/data.vue"
    export default {
        components:{
            ShowMessage
        },
      data(){
        return{
            selected:'请选择',
            data:[{
                name:'张三',
                info:'信息管理',
                list:[{
                    id:1,
                    content:'会计学',
                },{
                    id:2,
                    content:'社会学',
                }]
            },
            {
                name:'李四',
                info:'财务管理',
                list:[{
                    id:1,
                    content:'数学',
                },{
                    id:2,
                    content:'语文',
                }]
            }],
            newdata:[]
        }
      },
      methods:{
          ChangeName(){
              let data = {
                  name:'李四',
                info:'财务管理',
                list:[{
                    id:1,
                    content:'数学',
                },{
                    id:2,
                    content:'语文',
                }]
              }
              this.newdata = data
          },
          ChangeInfo(){
              this.info = "new" + this.info
          },
          ChangeList(){
              let newlist = {id:3,content:'数学'}
              this.list.push(newlist)
              console.log(this.list)
          },
          ChoseInfo(selected){
             this.newdata = this.data.find(val => val.name.includes(selected))
          }
        },
        watch:{
           selected:function(){
               this.ChoseInfo(this.selected)
               //this.newdata = this.data.find(val => val.name.includes(this.selected))
           } 
        }
    }
    </script>

    子组件:

    <template>
      <div class="data">
        姓名:{{name}}<br />
        专业:{{info}}<br />
        学科:<span v-for="item in list" :key="item.id">{{item.content}} / </span><br />
      </div>
    </template>
    
    <script>
    export default {
      name: 'HelloWorld',
      props: {
        name: String,
        info: String,
        list: Array
      }
    }
    </script>
  • 相关阅读:
    aspscheduler+uwsgi定时任务执行多次
    django定时任务
    django记录用户操作模块
    python缩小图片
    pymysql同时执行多条语句时报错
    MySQL8.0 修改密码
    linux中安装python3
    Mysql高性能
    Mysql高性能
    Mysql高性能
  • 原文地址:https://www.cnblogs.com/wss198909/p/15189114.html
Copyright © 2011-2022 走看看