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>
  • 相关阅读:
    C++反汇编第一讲,认识构造函数,析构函数,以及成员函数
    cassert(assert.h)——1个
    1012 数字分类 (20 分)
    1011 A+B 和 C (15 分)
    1009 说反话 (20 分)
    1008 数组元素循环右移问题 (20 分)
    1006 换个格式输出整数 (15 分)
    1004 成绩排名 (20 分)
    1002 写出这个数 (20 分)
    1001 害死人不偿命的(3n+1)猜想 (15 分)
  • 原文地址:https://www.cnblogs.com/wss198909/p/15189114.html
Copyright © 2011-2022 走看看