Javascript 我无法使用VueJS将数据输出到动态生成的表

我正在使用VueJS动态生成一个表，在创建

元素时，一切正常

为了设置它们，我有一个Vue组件，它通过调用addRow函数来输出。它使用的模板值取自两个输入字段，即“请添加服务”和“请输入价格”。将值添加到数据对象上的数组中，并动态清除这些值，以便添加更多项

当我控制台记录数组时，无论有多少项，我在数组中作为对象输入和存储的内容都会保留下来。它们的文本内容根本不在新表行中

经过相当多的研究，我得到的唯一线索是，这些元素可能不是反应性的。然而，他们有能手和二传手，这意味着不太可能。我的另一个想法是，它与范围有关

请进一步咨询

这是我的全部代码：

下面是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";
        }
    }



})

<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']
 })

Vue.component（'table-row'{
模板：'\\
\
{{this.name}}\
\
\
{{this.price}}\
\
\\
',
道具：[“行”]
})
var app=新的Vue({
el:“#应用程序”，
数据：{
公司名称：“公司名称”，
代表姓名：“代表姓名”，
电话：“+359-00-000-0000”，
新闻服务：“请添加服务”，
价格：“请输入价格”，
服务：[
]
},
方法：{
addRow:函数（）{
这是服务推送({
服务名称：this.newService，
价格：这个
});
this.newService=“请添加服务”；
this.price=“请输入价格”；
}
}
})

您可以添加

服务

作为组件的道具

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";
        }
    }



})

<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']
 })

Vue.组件（'表行'{
模板：'\\
\
{{service.servicesName}\
\
\
{{service.price}}\
\
\\
',
道具：[“服务”]
})