Javascript 更新vue组件数据内的阵列

我在我的组件数据中有一个键，可以初始化为null，也可以包含一些字符串。我希望能够创建尽可能多的关联键，同时允许将其初始化为null或使用多个值。我遇到的问题是，每次我按下按钮添加一个新的输入字段时，页面都会重新呈现，然后再次初始化数据

我一直在看这篇文章，我在addKeys函数中放置了一个调试器，并收到错误消息

this.license.associatedKeys.$set不是函数

。我不理解这个错误，也不知道如何向associatedKeys数组添加元素

<template>
    <div>
        <form>
            <label>Associated Keys</label>
            <button v-on:click="addNewKey">Add new key</button>
            <div v-for="(k,index) in licence.associatedKeys" :key="k">
                <input type="text" :value="k" @input="licence.associatedKeys[index]=$event.target.value">
            </div>  
        </form>
    </div>
</template>

<script>
import util from '~/assets/js/util'
export default {
    methods: {
        addNewKey() { 
            this.licence.associatedKeys.$set(this.licence.associatedKeys, null)
        }
    },
    data: () => ({
        licence: {
            associatedKeys: []
        }
    })
}
</script>

关联键
添加新密钥
从“~/assets/js/util”导入util
导出默认值{
方法：{
addNewKey（）{
this.license.associatedKeys.$set（this.license.associatedKeys，null）
}
},
数据：（）=>({
许可证：{
关联密钥：[]
}
})
}

看一看，特别是这个例子：

<!-- the submit event will no longer reload the page -->
<form v-on:submit.prevent="onSubmit"></form>

另外，您可能误读了文档，嵌套数据属性上的

$set

和

$add

方法使用了键和值参数。所以，你应该写

this.licence.associatedKeys.$set(this.licence.associatedKeys.length, null)

---

得到重定向的原因是表单中有一个按钮。而其他浏览器则不然，默认情况下，Chrome会将其视为重定向。解决此问题的最简单方法是定义一个动作

action=“#”

，这样，您就不必处理每个按钮来阻止默认动作

@input

很好，但vue有很多内置功能，例如

v-model

，它将自动绑定值，在更改时显示和更新值

推送时不需要使用

$set

（另外，在vue实例上设置它，而不是值（

this.$set（this.myVal，'myKey'，null）

而不是

this.myVal.myKey.$set（null）

）

最后，如果希望将键值对存储在数组中，则需要两个对象：键和值

newvue({
el:“应用程序”，
方法：{
addNewKey（）{
//this.license.associatedKeys.$set（this.license.associatedKeys，null）
this.license.associatedKeys.push（{key:null，val:null}）；
}
},
数据：（）=>({
许可证：{
关联密钥：[]
}
})
})

body{背景：#20262E；填充：20px；字体系列：Helvetica；}
按钮{填充：8px 16px；边框半径：20px；边框：无；}
#app{背景：fff；边框半径：4px；填充：20px；过渡：全部0.2s；}

关联键
添加新密钥
{{本许可证}

这里有几个问题，但是你能写下你的理想结果吗？谢谢你的回答和提琴，很容易看到后面发生了什么。我完全忽略了chrome在表单中按下按钮刷新页面，不确定是否可以/如何在循环中使用v-model。继续做好工作

this.licence.associatedKeys.$set(this.licence.associatedKeys.length, null)