elment弹出框显示不出来

Question

点击add弹出弹框怎么显示不了 奇怪
<template>

<div>
    <!-- Form -->
    <el-button type="primary" @click="add" style="margin-bottom: 10px;">添加规格</el-button>
    <el-dialog title="收货地址" v-model="specsFormVisible">
      <el-form :model="form">
        <el-form-item label="活动名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="活动区域" :label-width="formLabelWidth">
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
       <el-button @click="specsFormVisible = false">取 消</el-button>
     <!--   <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button> -->
      </div>
    </el-dialog>
</div>

</template>

<script>
export default {

data() {
  return {
      specsFormVisible: false,
      // dis:true,
    gridData: [{
      date: '2016-05-02',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1518 弄'
    }, {
      date: '2016-05-04',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1518 弄'
    }, {
      date: '2016-05-01',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1518 弄'
    }, {
      date: '2016-05-03',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1518 弄'
    }],
    dialogTableVisible: false,
    dialogFormVisible: false,
    form: {
      name: '',
      region: '',
      date1: '',
      date2: '',
      delivery: false,
      type: [],
      resource: '',
      desc: ''
    },
    formLabelWidth: '120px'
  };
},
methods:{
    add(){
        this.specsFormVisible=true;
        console.log(this.specsFormVisible);
        // alert(1)
    }
}

};
</script>

Answer 1

element-ui官方文档 el-dialog 没有v-model属性
这里将<el-dialog title="收货地址" v-model="specsFormVisible">
改成 <el-dialog title="收货地址" :visible="specsFormVisible">
应该就可以了。

Answer 2

我用这个的时候 有时候正常的有时候页面卡死。.....

Answer 3

v-model="specsFormVisible" 改为 :visible.sync="specsFormVisible"

Answer 4

v-model是版本1的时候可以用， 现在是:visible.sync="specsFormVisible"，还有一个原因是你的form表单有问题，这个也会影响dialog的打开，你试着把表单隐藏，看看能不能打开，如果打开了，就是表单的字段问题了

Answer 5

<el-dialog title="收货地址" :visible.sync="specsFormVisible">应该这么写