У меня проблемы с выводом данных в динамически генерируемую таблицу с VueJS

Question

Я генерирую таблицу динамически с VueJS, и все работает нормально, когда дело доходит до создания <th> элементы.

Чтобы настроить их, у меня есть компонент Vue, который выводится при вызове функции addRow. Он использует шаблоны со значениями, которые взяты из двух полей ввода, а именно "Пожалуйста, добавьте услугу" и "Пожалуйста, введите цену". Значения добавляются в массив объекта данных, и они динамически очищаются, чтобы можно было добавить больше элементов.

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

Единственная подсказка, которую я имею после долгого исследования, - то, что элементы не могли быть реактивными. Однако у них есть геттеры и сеттеры, а это значит, что это маловероятно. У меня была еще одна идея, что это связано с областью применения.

Пожалуйста, советуйте дальше.

Вот мой полный код: https://codepen.io/MrYY/pen/PeJjZy

А вот экземпляр Vue и компонент Vue

Vue.component('table-row', {
    template: '\<tr>\
    <th>\
      {{ this.name }}\
    </th>\
    <th>\
      {{ this.price }}\
    </th>\
    \</tr>\
  ',
  props: ['row']
 })

var app = new Vue({

    el: '#app',

    data: {
        companyName: "Company Name",
        repName: "Representative's name",
        phone: "[phone]",
        newService: "Please add service",
        price: "Please enter price",
        services: [

        ]
    },

    methods: {

        addRow: function () {
            this.services.push({
                servicesName: this.newService,
                price: this.price
            });
            this.newService = "Please add service";
            this.price = "Please enter price";
        }
    }



})

Answer 1

Можете добавить service в качестве реквизита для вашего компонента

<tr is="table-row" v-for="service in services" :service="service">

Vue.component('table-row', {
    template: '\<tr>\
    <th>\
      {{ service.servicesName }}\
    </th>\
    <th>\
      {{ service.price }}\
    </th>\
    \</tr>\
  ',
  props: ['service']
 })