vuejs를 사용하여 하위 구성 요소의 인스턴스 목록을 표시하려고합니다. 하위 구성 요소에는 사용자가 입력 할 입력 필드가 있습니다.
부모는 자식 구성 요소 (있는 경우)를 채우기 위해 데이터 배열을 검색하지만 입력 필드이기 때문에 자식 구성 요소는 값을 변경합니다 (하위 구성 요소가없는 경우 콘솔에서 오류를 생성합니다. t는 부모로부터 전달 된 값을 변경해야 함).
나는 게으르고 부모 수준에서 모든 것을 할 수 있지만 (즉, 검색 된 배열에 대해 v-for를 사용하고 부모에서 직접 요소 및 입력 목록을 구성하고 자식 구성 요소를 전혀 사용하지 않음) 이해합니다. 실제로 vuejs 방식이 아닙니다.
나는 자식 구성 요소에 익숙하지 않지만 정적 데이터라면 자식 구성 요소에서 props를 선언하고 부모로부터 채울 수 있다고 생각합니다. 그러나 내가해야 할 일은 부모에서 자식 구성 요소를 채우고 자식 구성 요소 내에서 변경을 허용하는 것입니다.
누군가 이것을 달성하는 올바른 방법을 설명해 주시겠습니까?
감사
하위 구성 요소에 대한 입력을 사용할 수 있습니다. 패턴은 다음과 같습니다 ( 여기에 표시된대로 각각 문자열 속성이있는 문자열 배열 또는 객체 배열에 대한 동일한 패턴 편집 ).
data: function() {
return {
objects: [ { someString: '' }, { someString: '' } ]
}
}
<the-child-component v-for="(object, i) in objects" :key="i"
v-model="object.someString"
></the-child-component>
그런 다음 하위 구성 요소에서 :
<template>
<div>
<input
v-bind:value="value"
v-on:input="$emit('input', $event.target.value)"
/>
</div>
</template>
export default {
name: 'the-child-component',
props: ['value'],
}
https://vuejs.org/v2/guide/components.html#Using-v-model-on-Components에 설명되어 있습니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다