element $msgbox render的checkbox不能双向绑定数据

Question

问题描述

在on change回调中不能再次改变value的值

问题出现的环境背景及自己尝试过哪些方法

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
data() {

        return {
            isChecked: false
        }
    },

const h = this.$createElement;

            const _this = this;
            this.$msgbox({
                title: '提示',
                message: h('div', null, [
                    h('p', null, '已将当前房源分配到 “长租整租房源” 中您可前往继续编辑房源详情'),
                    h('ElCheckbox', {
                        props: {
                            value: _this.isChecked
                        },
                        on: {
                            change(val) {
                                _this.isChecked = val;
                            }
                        }
                    }, '不再提示'),
                ]),
                type: 'success',
                showCancelButton: true,
                confirmButtonText: '确定',
                cancelButtonText: '取消',
            }).then(res => {
                // console.log(res);
            }).catch(err => {

            });

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

props: {
    checked: _this.isChecked
},

Answer 2

换成dialog

Answer 3

可以对el-picker做一次封装，然后渲染封装的这个组件

需要注意在外面要接收里面的值的改变

还要记得全局注册下组件

Vue.component('ElDatePickerBox', ElDatePickerBox)

el-date-picker-box的代码很简单

<template>
    <el-date-picker
        v-model="value"
        placeholder="选择日期"
        type="date">
    </el-date-picker>
</template>

<script>

    export default {
        name: 'el-date-picker-box', // Notice: 写组件的时候需要给一个名字
        directives: {},
        components: {},
        mixins: [],
        data() {
            return {
                value: ''
            }
        },
        props: {},
        computed: {},
        filters: {},
        methods: {},
        watch: {
            value: {
                immediate: true,
                handler(val) {
                    this.$emit('update-date', val)
                }
            }
        },
        beforeCreate() {
        },
        created() {
        },
        beforeMount() {
        },
        mounted() {
        },
        beforeUpdate() {
        },
        updated() {
        },
        activated() {
        },
        deactivated() {
        },
        beforeDestroy() {
        },
        destroyed() {
        },
        errorCaptured() {
        },
    }
</script>

<style lang="scss" scoped>

</style>

Answer 4

vNode 只是用来描述DOM，自身不维护状态，messageBox只是利用vNode渲染DOM，要想实现messageBox内容响应式，需要提供Vue实例（组件）：

1. 新建组件（customRadioGroup.js）:

   import Vue from "vue";
   
   const CustomRadioGroup = Vue.component("CustomRadioGroup", {
     props: ["value"],
     data() {
    return {
      internalValue: this.value,
    };
     },
     watch: {
    value(newVal) {
      this.internalValue = newVal;
    },
     },
     render(h) {
    return h(
      "el-radio-group",
      {
        props: { value: this.internalValue },
        on: {
          input: (value) => {
            this.internalValue = value;
            this.$emit("input", value);
          },
        },
      },
      [
        h("el-radio", { props: { label: "1" } }, "轻微瑕疵品"),
        h("el-radio", { props: { label: "2" } }, "中度瑕疵品"),
        h("el-radio", { props: { label: "3" } }, "严重瑕疵品"),
        h("el-radio", { props: { label: "4" } }, "极度次品"),
      ]
    );
     },
   });
   
   export default CustomRadioGroup;

2. 引入组件使用：

   import CustomRadioGroup from "./customRadioGroup.js";
   // ...其他代码
   MessageBox({
                title: "新弹窗标题",
                 message: h(CustomRadioGroup, {
                  props: { value: this.option },
                  on: {
                    input: (value) => {
                      this.option = value;
                    },
                  },
                }),
                showCancelButton: true,
                confirmButtonText: "确认",
                cancelButtonText: "取消",
                closeOnClickModal: false,
                closeOnPressEscape: false,
              })