LoginSignup
0

More than 1 year has passed since last update.

posted at

vue3 element plus modal 親から子のmodalを開く

ko.vue

<el-button type="text" @click="tuuhouVisible = true">modal 開く</el-button>
<el-dialog
    title="モーダル"
    v-model="tuuhouVisible"
    width="90%"
    :show-close=true
    :close-on-click-modal=false
>

    <div>

        {{model}}<br>
        {{foreign_key}}<br>
        {{user_id}}<br>

    </div>

    <span slot="footer" class="dialog-footer">
                    <el-button @click="tuuhouVisible = false">キャンセル</el-button>
                    <el-button type="primary" @click="tuuhouVisible = false">送信</el-button>
                </span>
</el-dialog>


//略
<script>
    export default {

        props: [
            'model',
            'foreign_key',
            'user_id',
        ],//設定することで親から値を渡すことができる

        data(){
            return {
                tuuhouVisible:false
            }
        },



oya.vue

<TuuhouComponent model="User"
                 :foreign_key="this.$route.params.id"
                 :user_id="this.$root.user.id"></TuuhouComponent>


こんな感じ。
ko.vueを


v-model="tuuhouVisible"

という感じで指定するのが味噌みたい。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
0