Laravel + vue - 道具未定义

时间:2016-12-02 16:25:14

标签: javascript php laravel vue.js

所以我是vue的新手,但要加快速度。但是,我无法使道具工作 - 它在我的子组件中始终未定义。

下面的想法是创建一个应用程序范围的通知模式窗口来显示通知。

这是我的app.js

require('./bootstrap');
import ModalNotification from './components/Modal-Notification.vue';

const app = new Vue({
el: '#app',
data : {
  formInputs: {},
  formErrors: {},
  showModal: false
},
components: {ModalNotification}
});

这是我的Modal-Notification.vue

  <template>

  <transition name="modal">
      <div class="modal-mask" @click="$emit('close')">
        <div class="modal-wrapper">
          <div class="modal-container" @click.stop>

            <!-- <div class="modal-header">
              <slot name="header">
                NOTIFICATION
              </slot>
            </div> -->

            <div class="modal-body">
              <slot name="body">
                Bla bla
              </slot>
            </div>

            <div class="modal-footer">
              <slot name="footer">
                <button class="modal-default-button btn btn-success" @click="$emit('close')">
                  OK
                </button>
              </slot>
            </div>
          </div>
        </div>
      </div>
    </transition>

    </template>

    <script>
    export default {
        name: 'ModalNotification',
        data: function() {
            return {
            };
        },
        props: ['showModal'],

        mounted: function() {
          console.log(this);
          document.addEventListener("keydown", (e) => {
            console.log(this.showModal);
            if (this.showModal && e.keyCode == 27) {
              this.$emit('close');
            }
          });
        },

        methods: {
        }
    }
    </script>

app.blade.php的相关部分

<div class="container-fluid" id="app">
      <button @click="showModal = true" class="btn btn-default">MODAL</button>
      <modal-notification v-if="showModal" @close="showModal = false" :showModal="false">
        <p slot="body" id="notification-message">hehe</p>
      </modal-notification>
      <div id="wrapper">
        @yield('sidebar')
        @yield('content')
      </div>
    </div>

我已经尝试了所有的东西,除了切换到Browserify,babel和其他东西,但我认为不应该需要它 - webpack应该可以正常工作。

如果可以,请帮忙。

1 个答案:

答案 0 :(得分:0)

您在以下代码段中出错:

  <modal-notification v-if="showModal" @close="showModal = false" :showModal="false">
    <p slot="body" id="notification-message">hehe</p>
  </modal-notification>

:showModal="false"基本上是v-bind:showModal="false"的快捷方式,它试图在附加HTML属性(documentation)的值中搜索vue实例变量。当您传递的false不是vue数据变量时,它只是在null道具中传递showModal

如果您只想传递false,请将代码更改为以下内容:

  <modal-notification v-if="showModal" @close="showModal = false" showModal="false">
    <p slot="body" id="notification-message">hehe</p>
  </modal-notification>

被修改

我认为这是camelCase-vs-kebab-case的神奇之处:

  

HTML属性不区分大小写,因此在使用非字符串模板时,camelCased prop名称需要使用它们的kebab-case(连字符分隔)等价物:

您需要传递:show-modal="false"

  <modal-notification v-if="showModal" @close="showModal = false" show-modal="false">
    <p slot="body" id="notification-message">hehe</p>
  </modal-notification>