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

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

0 голосов
/ 05 мая 2018

Я генерирую таблицу динамически с помощью 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: "+359-00-000-0000",
        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";
        }
    }



})

1 Ответ

0 голосов
/ 05 мая 2018

Вы можете добавить 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']
 })
...