Question

我正在使用VueJS动态生成表格，并且在创建<th>元素时一切正常。

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

当我控制台记录数组时，无论有多少项，我输入并作为对象存储在数组中的内容仍然存在。他们的文本内容根本不在新表行中。

经过大量研究后我唯一的线索就是元素可能不会被反应。然而，他们有吸气剂和制定者，这意味着它不太可能。我的另一个想法是，它与范围有关。

请进一步咨询。

以下是我的完整代码：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";
        }
    }



})

Answer 1

您可以添加X = [Interval(*x) for x in X]作为组件的道具

service

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

1 个答案: