javascript - 更新 vue 组件数据中的数组

Question

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

我一直在看this文章中，我在 addKeys 函数中放置了一个调试器，并收到错误消息 this.licence.associatedKeys.$set is not a function。我不明白这个错误，也不确定如何将元素添加到 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>

Answer 1

您获得重定向的原因是您在表单中有一个按钮。虽然其他浏览器不这样做，但 Chrome 默认将其视为重定向。解决它的最简单方法是定义一个操作action="#"，这样您就不必处理每个按钮来防止默认操作。

@input 很好，但是 vue 有很多内置功能，例如 v-model 会自动绑定(bind)值，显示并更新它的变化.

当你推送时你不需要使用 $set (加上你在 vue 实例上设置它而不是值 (this.$set(this.myVal, 'myKey', null) 而不是 this.myVal.myKey.$set(null))

最后，如果你想将键值对存储在一个数组中，你需要两个对象，键和值

new Vue({
  el: "#app",
  methods: {
    addNewKey() {
      //this.licence.associatedKeys.$set(this.licence.associatedKeys, null)
      this.licence.associatedKeys.push({key:null, val:null});
    }
  },
  data: () => ({
    licence: {
      associatedKeys: []
    }
  })
})

body {background: #20262E;padding: 20px;font-family: Helvetica;}
button {padding: 8px 16px;border-radius: 20px;border: none;}
#app {background: #fff;border-radius: 4px;padding: 20px;transition: all 0.2s;}

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
    <div>
        <form action="#">
            <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" v-model="k.key">
                <input type="text" v-model="k.val">
            </div>  
        </form>
    </div>
    <pre>{{this.licence}}</pre>
</div>