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

看看event modifiers，特别是这个示例：

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

我认为这是停止页面重新加载所需要的。

对于未定义的错误：您可以尝试使用实例本身，即

this.$set('license.associatedKeys[' + this.license.associatedKeys.length + ']', null);

此外，您可能会误读文档，嵌套数据属性的.$set和.$add方法采用 key 和 value 参数。所以，你应该写

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

Answer 2

您获得重定向的原因是您在表单内有一个按钮。虽然其他浏览器没有，但Chrome会默认将其视为重定向。解决该问题的最简单方法是以这种方式定义一个操作action="#"，而无需处理每个按钮即可防止发生默认操作。

@input很好，但是vue具有很多内置功能，例如v-model会自动绑定值，并在更改时显示和更新。

您在推送时不需要使用$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>

更新Vue组件数据中的数组

2 个答案: