NUXTJS：如何从客户端 javascript 更新 data() 变量

Question

data() {
  const ports = [
    {
      subtitle: "PORT 1",
      title: "COM8",
    },
    {
      subtitle: "PORT 2",
      title: "COM11",
    },
  ];

  return {
    ports,
  };
},

我有一个名为 ports 的服务器端变量。我想更新/添加项目并希望 vue 渲染器响应式更新它。

下面的javascript会起作用吗？

<script>
  this.ports.push({ title: devicePort, subtitle: deviceName });
</script>

EDIT1：我想明确表示我是从客户端浏览器调用上面的脚本块。

EDIT2： 遵循 Kissu 的回答，问题是我收到来自浏览器客户端 javascript 的 "Uncaught Reference Error: addOne is undefined" 错误

例如

我所做的只是从浏览器客户端 javascript 调用 addOne()

例如

setTimeout(function( {
  addOne(); //undefined
},100)

EDIT3：根据@kissu 要求

//websocket running on browser

ws.on("message", function (msg) {
  addOne(); 
  // **"Uncaught Reference Error: addOne is undefined"**
}

Answer 1

在Vue2中应该是这样写的

<template>
  <div>
    <pre>{{ array }}</pre>
    <button @click="addOne">Add one object to the array</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      array: [
        {
          subtitle: 'PORT 1',
          title: 'COM8',
        },
        {
          subtitle: 'PORT 2',
          title: 'COM11',
        },
      ],
    }
  },
  methods: {
    addOne() {
      this.array.push({ title: '3000', subtitle: 'Samsung' })

      // the one below is a bit more bulletproof, more info here: https://vuejs.org/v2/guide/reactivity.html#For-Arrays
      // this.$set(this.array, this.array.length, { title: '3000', subtitle: 'Samsung' })
    },
  },
}
</script>