laravel-5 - Vue 组件不渲染并忽略 props

Question

我遇到了一个 Vue 组件的问题，它应该只显示一个简单的对话框，该组件如下所示：

<template>
  <v-layout row justify-center>

    <v-dialog
      v-model="show"
      max-width="290"
      :persistent="persistent"
    >
      <v-card>
        <v-card-title class="headline grey lighten-2">{{header}}</v-card-title>

        <v-card-text v-html="text">
            {{text}}
        </v-card-text>

        <v-card-actions>
          <v-layout>
            <v-flex xs6 md6 lg6 class="text-xs-center">
                <v-btn block
                color="primary"
                flat
                @click="closeDialog(true)"
                >
                {{agree_button_text}}
                </v-btn>
            </v-flex>

            <v-flex xs6 md6 lg6 class="text-xs-center">
               <v-btn block
               color="warning"
               flat
               @click="closeDialog(false)"
               >
               {{abort_button_text}}
               </v-btn>
           </v-flex>

        </v-layout>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-layout>
</template>

<script>
  export default {
      props:
      {
          persistent:
          {
              type: Boolean,
              required: false,
              default: false
          },
          header:
          {
              type: String,
              required: false,
              default: ""
          },
          text:
          {
              type:String,
              required: false,
              default:""
          },
          abort_button_text:
          {
              type: String,
              required: false,
              default:"Avbryt"
          },
          agree_button_text:
          {
              type: String,
              required: false,
              default: "OK"
          },
          value:
          {
          }
      },
    data ()
    {
      return {
        show: this.value
      }
    },
    methods:
    {
      closeDialog:
      function(retval)
      {
          this.show = false;
          this.$emit('close-dialog-event',retval);
      }
    }
  }
</script>

在 app.js 我添加了以下内容：

require('./bootstrap');

import babelPolyfill from 'babel-polyfill';
import Vuetify from 'vuetify'


window.Vue = require('vue');
var vueResource = require('vue-resource');
window.socketIo = require('vue-socket.io');

Vue.use(vueResource);
Vue.use(Vuetify);

Vue.http.headers.common['X-CSRF-TOKEN'] = $('meta[name="csrf-token"]').attr('content');
/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

Vue.component('simple-dialog', require('./components/common/SimpleDialog.vue'));

在我使用我拥有的组件的页面上：

<div id="overview">
        <simple-dialog show="true"
                      :header="dialog_header"
                      :text="dialog_message"
                      @close-dialog-event="display_dialog = false"></simple-dialog>
        <v-app>
            <v-content>
                <v-container>
                    FOO AND BAR     
                </v-container>
            </v-content>
        </v-app>
</div>

我没有收到任何关于组件未加载的错误。如果我尝试在 app.js 文件中更改组件的名称，然后尝试加载该组件，则会引发无法找到该组件的错误。所以换句话说，它似乎加载成功。但是，如果我更改道具的名称，例如更改

<simple-dialog show="true"
              :header="dialog_header"
              :text="dialog_message"
              @close-dialog-event="display_dialog = false"></simple-dialog>

至

<simple-dialog show_bla="true"
              :asdasd="dialog_header"
              :asdasd="dialog_message"
              @close-dialog-event="display_dialog = false"></simple-dialog>

它不在乎。它甚至不会抛出关于这些道具不存在或无效的错误。页面使用的javascript：

var app = new Vue({
    el: '#overview',
    data:
    {
        display_dialog:true,
        dialog_header:'',
        dialog_message:'',
    },
    methods:
    {

    }
});

问题可能是什么？谢谢你的帮助！

标签： laravel-5vue.js

Answer 1

好吧，当您将值发送到组件并且您prop show被初始化为空对象时。

代替

value: {}

至

value

或者

将默认值传递给 false

value: {
    type: Boolean
    default: false
}

希望这可以帮助！