VueJs: Неверный реквизит: ожидаемый логический, получил неопределенный - PullRequest
Новая
       0

VueJs: Неверный реквизит: ожидаемый логический, получил неопределенный

0 голосов
/ 12 апреля 2020

При использовании компонента я получил две ошибки

1-

[Vue warn]: свойство или метод "premium" не определены в экземпляре, но на них ссылаются во время визуализации. Убедитесь, что это свойство является реактивным, либо в параметре данных, либо для компонентов на основе классов, инициализируя свойство

2-

[Vue warn ]: Недопустимая проп: проверка типа не выполнена для проп "премиум". Ожидаемый логический, получил Undefined

Вот мой код:

HTML: 

<!DOCTYPE html>
    <html lang="en">

    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>eCommerce</title>
    </head>

    <body>

      <div id="app">
        <product :premium='premium'></product>
      </div>




      <script src="public/plugins/bootstrap-4.3.1/js/bootstrap.min.js">
      <script src="public/js/vue.js"></script>
      <script src="public/js/app.js"></script>
    </body>

</html>

app. js

Vue.component('product', {
      props: {
        premium: {
          type: Boolean,
          required: true
        }
      },
      template: `
        <div class="container">
           <p>{{ premium }}</p>
        </div>
    `,
      data() {
        return {
          cart: 0,
          color: "white"
        }
      },
      methods: {
        addToCart() {
          return this.cart++
        },

      }

    }) //component

    var app = new Vue({
      el: '#app',

});

Ответы [ 2 ]

1 голос
/ 13 апреля 2020

Здесь есть две проблемы:

  1. обязательное свойство указано, но не определено
  2. недопустимый тип свойства

определяет требуемое свойство

Вам необходимо определить начальное значение , поскольку свойство обязательно . Лучше всего это сделать, используя default : 

Vue.component('product', { 
  props: {
     premium: {
        type: Boolean,
        required: true,
        default: false
     }
  },

См. Также [Vue warn]: свойство или метод не определены в экземпляре, но имеются ссылки во время рендеринга

связать значение с допустимым типом

Вы [динамически связываете] [1] (обозначается двоеточием : как сокращенный v-bind префикс) a JavaScript выражение premium для логического свойства.

Предполагая, что переменная с таким именем premium не определена, она оценивается как JavaScript значение Undefined вместо обязательного допустимые логические значения false или true. Таким образом, предупреждения.

Попробуйте связать его с константой либо с Dynami c привязкой , либо с простой stati c привязкой , например: 

<product premium="true"></product>

См. Также Vuejs error, Invalid prop: проверка типа не выполнена для prop. Ожидаемая дата, полученный номер со значением

дальнейшее чтение на реквизитах

1 голос
/ 12 апреля 2020

, поскольку вы не определили свое свойство данных, просто добавьте новое в свой экземпляр, см. Это: 

var app = new Vue({
  el: '#app',
  data: {
   // i set true because your component requires Boolean type
   premium: true
  }
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...