Vue -cli не может показать модальное окно - PullRequest
Новая
       26

Vue -cli не может показать модальное окно

0 голосов
/ 25 января 2020

Я создал приложение vue -cli и то, что у меня сейчас есть:

  1. Main. js
import Vue from 'vue'
import App from './App.vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false
Vue.use(Element)
new Vue({
  render: h => h(App)
}).$mount('#app')
Приложение. vue 
<template>
  <div id="app">
  <head>
    <title>SmartPlanPlus</title>
  </head>
  <SmartPlan/>
  </div>
</template>

<script>
import SmartPlan from './components/SmartPlan.vue'

export default {
  name: 'app',
  components: {
    SmartPlan
  }
}
</script>
SmartPlan. vue 
<template>
 <div id="app">  
  <el-container>
  <el-header>
  <table>
    <tr>
      <td>
        <el-button icon="el-icon-folder-opened" circle @click="showModal = true">
        </el-button>
        <modal :show="showModal" @close="showModal = false"></modal>
      </td>
    </tr>
  </table>
  </el-header>
  <el-main>
  <svg overflow="scroll" viewBox="0 0 500 250"><g id="svg_obj" transform="translate(0,200) scale(1,-1)"></g></svg>
  </el-main>
  <el-footer>
  </el-footer>
  </el-container>
 </div>
</template>

<script>

import modal from '../components/PlanList.vue'

export default {
  name: 'SmartPlan',
  props: {
  },
  components: {
    modal
  }
}
</script>
PlanList. vue 
<template>
    <transition name="modal">
        <div class="modal-mask" v-show="show">
            <div class="modal-container">
                <div class="modal-header">
                    <h3>New Post</h3>
                </div>
                <div class="modal-body">
                    <label class="form-label">
                        Title
                        <input class="form-control">
                    </label>
                    <label class="form-label">
                        Body
                        <textarea rows="5" class="form-control"></textarea>
                    </label>
                </div>
                <div class="modal-footer text-right">
                    <button class="modal-default-button" @click="savePost()">
                        Save
                    </button>
                </div>
            </div>
        </div>
    </transition>
</template>

<script>
export default {
  name: 'modal',
    props: ['show'],
}
</script>

Я проверил почти все примеры, такие как:

Я хочу, чтобы при нажатии кнопки на SmartPlan появлялось модальное окно , Но это не работает. Что я делаю не так?

1 Ответ

0 голосов
/ 25 января 2020

В вашем SmartPlan. vue забыли поместить данные showModal в вашу модель данных. Поместите это как этот 

export default {
  name: 'SmartPlan',
  data() {
     return {
        showModal:false
     }
  }
  props: {
  },
  components: {
    modal
  }
}
...