Question

我想在需要时将数据添加到表中。但是，初始化vue实例后，我无法添加数据。

我尝试使用以下跟踪，但是仍然不更新数据。

・ $ nextTick ・ $ set

<script>
var overall = new Vue({                                                                                                                                         
  el: '#overall',                                                                                                                                               
  data: {                                                                                                                                                       
      headers:[                                                                                                                                                 
        "no","name",'gender'                                                                                                                          
      ],                                                                                                                                                        
      items: []                                                                                                                                                 
  },                                                                                                                                                              methods: {                                                                                                                                                    
    add: function(item)                                                                                                                                         
    {                                                                                                                                                           
      this.items = item;
    }
  }
});

overall.add([{no:'1',name:'Tom Tom',gender:'male'}]);
</script>

<div id="overall">
  <table>
    <thead>      <tr>
        <th  v-for="header in headers">
          {{header}}
        </th>
      </tr>
    </thead>
    <tbody >
      <tr v-if="items.length === 0">                                                                                                                                    <td>No data</td>                                                                                                                                        </tr>                                                                                                                                                           <tr v-else v-for="item in items">                                                                                                                         

        <td>{{item.no}}</td>
        <td>{{item.name}}</td>
        <td>{{item.gender}}</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

我认为，在继续解决方案之前，您应该了解以下几点：

数据是一个函数，它应该返回组件值。

<string name="main_btn_X">xxxx xx \n xxx xxxx</string>

使用数组时，有一种方法可以将对象附加到数组。此方法称为“推送”，您应按以下方式使用：

  data: function() {
    return {
        headers: ['Nº', 'Name', 'Gender'],
        items: [{}],
    }
  },

使用Vue实例时，有一个建议：不要在其范围之外使用。您可以使用它，但不可以。这是在创建或装入的事件上加载数组元素的更好的解决方案，您可以在VueJS网站上了解有关它的更多信息。 https://vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks

关于该解决方案，我已经将我告诉您的内容结合在一起，并且可以正常工作。我在v-for元素中添加了：key属性，但主要的变化在于JavaScript代码：

  methods: {
    add: function(item) {
        this.items.push(item);
    }
  },

Answer 2

问题在于，您每次使用Array方法时都不会更新add，而是将其完全替换为新的。

add: function(item) {                                                                                                                                                           
      this.items.push(item); //change this line to push item to array instead of replacing it everytime.
    }

您需要修复的另一部分是，不要仅通过您要添加的项目来传递array方法中的add个项目。

overall.add({no:'1',name:'Tom Tom',gender:'male'}); // remove the array brackets from here

下面是正在运行的示例： https://jsfiddle.net/52d96oxj/

var overall = new Vue({
  el: '#overall',
  data: {
    headers: [
      "no", "name", 'gender'
    ],
    items: []
  },
  methods: {
    add: function(item) {
      this.items.push(item); // push item to existing array
    }
  }
});

// Add objects, not array to the list
overall.add({ no: '1', name: 'Tom Tom', gender: 'male'});
overall.add({ no: '2', name: 'John Doe', gender: 'male'});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="overall">
  <table>
    <thead>
      <tr>
        <th v-for="header in headers">
          {{header}}
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-if="items.length === 0">
        <td>No data</td>
      </tr>
      <tr v-else v-for="item in items">

        <td>{{item.no}}</td>
        <td>{{item.name}}</td>
        <td>{{item.gender}}</td>
      </tr>
    </tbody>
  </table>
</div>

如何在vue.js中将数据添加到表中？

2 个答案: