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:
    {

    }
});

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

Answer 1

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

替换

value: {}

到

value

或

传递默认值为false

value: {
    type: Boolean
    default: false
}

希望这会有所帮助！

Vue组件不渲染，并忽略道具

1 个答案: