Question

我正在学习Vue JS并在尝试使用构造函数和push函数使用对象填充数组时遇到了一个特定问题。在Vue JS中，push方法将空白对象添加到数组中，而不是构造函数创建的空白对象。 JS小提琴下面。

我知道在传统的javascript中，下面的代码可以正常工作，任何人都可以解释为什么Vue JS以不同的方式解释相同的代码。

function node (){
  this.x = Math.random();
  this.y = Math.random();
}

let nodes = [];
nodes.push(new node());
console.log(nodes);

JS小提琴： https://jsfiddle.net/ex080/t690v9pu/

HTML：

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <button @click="generate">Generate Object</button>
  <li v-for="node in nodes">
    {{node.num}}
  </li>
</div>

JavaScript的：

new Vue({
  el: '#app',
  data: {
    nodes: []
  },
  methods: {
    node() {
        num = Math.random();
        console.log(num);
      },
      generate() {
        this.nodes.push(new this.node());
      }
  }
});

Answer 1

您没有在任何地方存储对num的引用。尝试从节点方法返回一个对象：

 return {num:  Math.random()}

编辑：

使用new创建一个对象，并使用它创建一个上下文：

function node (){
  // 'this' refers to the instance of the node object
  // it keeps a reference to the properties x and y
  this.x = Math.random();
  this.y = Math.random();
}

然而，声明方法node()是一个函数而不是构造对象。

node() {
    // 'num' is declared and is accessible only within the scope of the function
    // it is a candidate for garbage collection as soon as the function completes.
    num = Math.random();
    console.log(num);
},

为了演示，我向您展示返回对象的方式与使用第一个示例中的new node()相同。

推送函数在构造函数Vue JS之后将空对象传递给数组

1 个答案: