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

Question

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

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

将javascript下面会工作吗?

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

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

EDIT2:遵循kissu的答案，问题是我得到"未捕获的引用错误:addOne是未定义的">浏览器客户端javascript出错

。

我所做的就是从浏览器客户端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>