Ссылка на свойства передается как реквизит в компонентах Vue.js - PullRequest
Новая
       2

Ссылка на свойства передается как реквизит в компонентах Vue.js

0 голосов
/ 07 апреля 2019

Я начал работать над прототипом настольной игры и решил пойти с Vue.js. У меня есть некоторый опыт работы с JavaScript, и все шло нормально ... пока я не попытался получить доступ к свойству, переданному с помощью 'props' в компоненте.

Вот весь код: 

<!DOCTYPE HTML>

<html>

<head>
  <title>Board</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <style type="text/css">
    #board {
      width: 600px;
    }
    .square { width: 100px; height: 100px; margin: 1px; border: 1px solid grey; display: inline-block; float: left; }
  </style>
</head>

<body>

  <div id="board">

    <square v-for="square in squares"></square>

  </div>

  <script>
    var app = new Vue({
      el: '#board',
      data: {
        squares: []
      }
    })

    const rows = 5
    const cols = 5
    const reservedLocation = { row: 2, col: 2 }

    Vue.component('square', {
      props: [
        'row',
        'col',
        'type',
      ],
      template: '<div class="square" v-on:click="logLocation"></div>',
      methods: {
        logLocation: function() {
          console.log(this)
          console.log("Location: " + this.col + "x" + this.row )
        },
      },
    })

    for (var row=0; row<rows; row++) {
      for (var col=0; col<cols; col++) {
        const type = (row == reservedLocation.row && col == reservedLocation.col) ? 'reserved' : 'empty'
        app.squares.push({ row: row, col: col, type: type })
      }
    }

  </script>

</body>

</html>

То, что происходит, это то, что div "board" заполнен "квадратными" компонентами. Каждый квадратный компонент имеет свойства 'row', 'col' и 'type', передаваемые ему как 'props'. Когда пользователь щелкает квадрат, вызывается функция logLocation соответствующего компонента, и все, что делает эта функция - регистрирует свойства row и col.

Все работает нормально, кроме записанного сообщения: «Location: undefinedxundefined», другими словами, this.col и this.row, по-видимому, не определены. Я проверил «это», и, похоже, это правильный компонент.

Я уверен, что это что-то очевидное, но я не смог найти ответ ни в официальной документации, ни в учебниках, ни даже здесь, на самом переполнении стека - возможно, я не использую правильные термины.

Немного новой информации: свойства 'row' и 'col' установлены для объекта компонента и в свойстве '$ props', но значение, которое они возвращают в 'undefined'. Я как-то неправильно передаю параметры?

Решение

Оказывается, в документации Vue.js есть раздел, специально посвященный использованию 'v-for' с компонентами: "v-for with Component" и вот соответствующая часть кода : 

  <div id="board">

    <square
      v-for="square in squares"
      :key="square.id"
      :row="square.row"
      :col="square.col"
      :type="square.type"
    ></square>

  </div>

Огромное спасибо Стивену Томасу за то, что он указал мне правильное направление!

Ответы [ 2 ]

2 голосов
/ 07 апреля 2019

Вы правильно определили реквизиты и правильно обращаетесь к реквизитам, но на самом деле вы не установили для них какое-либо значение.Разметка: 

<square v-for="square in squares"></square>

не передает реквизиты компоненту.Возможно, вы хотите что-то вроде 

<div v-for="row in rows" :key="row">
    <div v-for="col in cols" :key="col">
        <square :row="row" :col="col"></square>
    </div>
</div>
0 голосов
/ 07 апреля 2019

Попробуйте использовать

console.log ("Location:" + this. $ Props.col + "x" + this. $ Props.row)

...