새 텍스트 상자 Vue3을 추가할 번호를 입력합니다.

새 텍스트 상자 Vue3을 추가할 번호를 입력합니다.

handle add new inutbox를 시도해보고 싶습니다.https://demo.smarttutorials.net/vuejs-dynamically-add-remove-input-textbox/ 의 예를 따르려고 하고 있습니다만, 할 수 없습니다.

입력란에 숫자를 입력할 때 하고 싶은 작업입니다.

새 입력 상자 추가

입력 1에 1을 더하면 입력 2에 2박스를 더하면

내 코드

    <DialogTitle as="h3" class="text-xl leading-6 font-medium text-gray-900 py-2">Transaction #1</DialogTitle>
   <input type="text"  v-model="inputs.sequence" @inputs='$emit("update:modelValue", inputs)' class="border border-gray-300 py-2 px-1 text-lg" />


export default {
  name:'prize-editor',
  components: {
    DropImages,
    date,
    DialogTitle
  },
  props:{
    modelValue:Object
  },
  setup(props){
    let inputs = ref({
      detail:'',
      name:'',
      startDate:'',
      sequence:'',
      rewardId:'',
      imageUrl:"",
    })

    onMounted( () => {
      inputs.value=props.modelValue
    });
    watch(props.modelValue, (value) => {
      inputs.value = value
      console.log('watch',value)
    })
    return{
      inputs,  
    }
  },
};

이러한 입력이 어떻게 동작해야 하는지에 대해서는 거의 설명하지 않았습니다만, 각 입력의 값을 보존(및 무엇인가를 실시)하는 경우는, 어레이가 필요합니다.또, 그 어레이에 입력하는 수만큼의 요소를 추가하는 함수도 필요합니다(함수를 호출하는 방법은, 유저에게 달려 있습니다).

addInput(number) {
  for(let i = 0; i < number; i++) {
    this.inputArray.push({ value: "" });
  }
}

그럼 이걸 사용해서v-for어레이를 기반으로 입력을 렌더링하려면:

<input v-for="(input, index) in inputArray" :key="index" v-model="input.value" type="text" />

인덱스를 사용할 수 있는 요소에 액세스하려면(예:inputArray[2].value(3번째 입력값)

이 컴포넌트는 사용자가 원하는 것을 포함하는 완전한 vue 컴포넌트입니다.옵션 api를 기반으로 하며 스타일은 없습니다.이러한 컴포넌트는 다음과 같습니다.

<template>
  <div>
    <input type="text" v-model="inputCounter" />
    <button @click="setInputs">Set</button>
    <input v-for="(input, index) in inputs" :key="index" v-model="input.value" type="text" />
  </div>
</template>

<script>
export default ({
  data() {
    return {
      inputCounter: "",

      inputs: []
    }
  },

  methods: {
    setInputs() {
      for(let i = 0; i < parseInt(this.inputCounter); i++) {
        this.inputs.push({ value: "" });
      }
    }
  }
})
</script>

언급URL : https://stackoverflow.com/questions/69757262/input-number-to-add-new-text-box-vue3