父组件向子组件传递数据,子组件展示并更新 element-ui

<el-select v-model="currentAuditProcess" placeholder="请选择"
    @click.native="clickSearchAuditProcessList">
    <el-option v-for="item in auditProcesses"
     :key="item.id" :label="item.name" :value="item.id"></el-option>
 </el-select>

export default Vue.extend({
    props:{
        engineFormData: {}
    },
    data(){
        currentAuditProcess: null,
        auditProcesses: [],
    }

    watch:{
        engineFormData: function (newValue, oldValue) {
                if (newValue){
                    this.auditProcesses = [];
                    this.auditProcesses.push(newValue.audit_process);
                    this.currentAuditProcess =newValue.audit_process.id;

                }
        }
    },
    methods:{
        clickSearchAuditProcessList(){
            this.searchRemoteAuditProcesses();
        },

        async searchRemoteAuditProcesses() {
            const result = (await this.$apollo.query({
                query: AuditProcessList,
                variables: { application: this.application }
            })).data.auditProcessList;
            this.auditProcesses = result.auditProcessList;
        },
    }

})

原文地址:https://www.cnblogs.com/jijizhazha/p/12409163.html

时间: 2024-08-24 23:05:13

父组件向子组件传递数据,子组件展示并更新 element-ui的相关文章

iframe实践小结:如何实现父页面向子页面传递数据

思路分析: 子页面获取数据: 补充说明: 需要注意的是:主页面与子页面的sessionStorage不是共享的,而是相互独立,另外postMessage只支持原生js写法,不支持jq获取id 原文地址:https://www.cnblogs.com/hxw1024/p/12046521.html

vue父页面给子页面传递数据

父页面: <template> <div>{{msg}} <Son title='向子文件传递数据' :data='data' :lifemsg ='lifemsg' :num='num'/> <button @click="chageMsg">修改数据</button> <input type="text" v-model="lifemsg" /> </div>

vue引入iframe的父页面向子页面传递数据

父页面 <template> <div> <el-button @click='btn(index)' :class="{'active':activeName2==index}" v-for="(item,index) in list" :key="index"> {{item.label}} </el-button> <iframe-tab :assid="assid"

layui中从子窗口传递数据到父窗口,第三个子弹层的值传给第二个弹层

最近做一个项目的需要多个弹层,每个弹层中还需要数据传递, 大概如图,看图自己应该明白 如何在在b页面选择好的值传给a页面的问题,这个问题我百度了好久都没有解决 后来参考了文档 http://fuxiao.io/practice/docs/#/layui/layer/iframes 加上自己理会,终于解决问题了,这个文档看了好几次还是不太明白(个人理解能力差),后来加班自己边动手边理解,解决问题了 上代码 主页面(top.html)的代码 <!DOCTYPE html> <html lan

ASP.net MVC 向子视图传递数据

使用 RenderPage 加载子视图 @RenderPage("~/Shared/Component/Dialog.cshtml", new { title = "Hello world!", content="Nani?" }) Razor子视图里使用 Page 来获取传递的数据 <div id="dialog" title="@Page.title" style="display: n

组件之间使用Prop传递数据

<div id="example"> <father></father> </div> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script type="text/javascript"> Vue.component('child', { props: ['myMessage'], te

vue组件-子组件向父组件传递数据-自定义事件

自定义事件 我们知道,父组件是使用 props 传递数据给子组件,但如果子组件要把数据传递回去,应该怎样做?那就是自定义事件!

Vue.js-----轻量高效的MVVM框架(九、组件利用Props传递数据)

#使用props传递数据 html:传递普通的字符串 <h3>#使用props传递数据</h3> <div id="dr01"> <div>组件实例的作用域是孤立的.这意味着不能并且不应该在子组件的模板内直接引用父组件的数据.可以使用 props 把数据传给子组件.</div> <br /> <child msg="hello, vue.js!"></child> <

总结一下微信小程序中父子兄弟组件传递数据

常规的这种写法就是父组件在向子组件传递数据 子组件向父组件传递数据主要通过监听事件 比如like点赞功能触发了一个like事件 父组件通过绑定like事件来监听 对应事件: 原文地址:https://www.cnblogs.com/rmty/p/10914342.html

vue兄弟组件传递数据

在main.js里面设置data{eventHub:new Vue() } new Vue({ el: '#app', router, store, template: '<App/>', components: { App }, data:{ eventHub:new Vue() // 在main.js设置所有组件都能用调用 }, }) 我们再组件一设置一个事件调用组件二的事件,传递数据给组件二 <template> <div v-on:click="on()&q