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

Question

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

  return {
    ports,
  };
},

我有一个名为 ports 的服务器端变量。我想 update/add 项目到它，并希望 vue 渲染器反应更新它。

下面的 javascript 行得通吗？

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

EDIT1: 我想说明一下，我是从客户端浏览器调用上面的脚本块。

EDIT2: 按照 kissu 的回答，问题是我从浏览器客户端收到 "Uncaught Reference Error: addOne is undefined" 错误javascript

例如

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

例如

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>

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

NUXTJS: How do I update data() variable from client side javascript

javascript

nuxt.js

vuetify.js