vue 구성 요소 데이터 내의 어레이를 업데이트하는 중

vue 구성 요소 데이터 내의 어레이를 업데이트하는 중

컴포넌트 데이터 내에 null로 초기화되거나 문자열이 포함되어 있는 키가 있습니다.원하는 수만큼 관련 키를 만들 수 있고 null 또는 여러 값을 사용하여 초기화할 수도 있습니다.새로운 입력 필드를 추가하기 위해 버튼을 누를 때마다 페이지가 다시 렌더링되고 데이터가 다시 초기화되는 문제가 발생합니다.

이 문서를 보고 있는데 addKeys 함수 내에 디버거를 배치하면 오류 메시지가 나타납니다.this.licence.associatedKeys.$set is not a function이 에러는 이해할 수 없습니다.또, 관련지어져 있는 키 배열에 요소를 추가하는 방법을 알 수 없습니다.

<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>

리디렉션되는 이유는 양식 안에 버튼이 있기 때문입니다.다른 브라우저에서는 그렇지 않지만 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>

이벤트 수식자, 특히 다음 예를 참조하십시오.

<!-- 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)

언급URL : https://stackoverflow.com/questions/52297931/updating-array-inside-vue-components-data