CODEWITHSUNDEEP
vue.jsvuexhandlervuejs3
slappy
slappy

Reputation: 59

Input number to add new text box Vue3

I want to try handle add new inutbox. I try to follow this example https://demo.smarttutorials.net/vuejs-dynamically-add-remove-input-textbox/ but I can't do

This is i want todo When i type number in inputbox

add new inputbox

if input 1 add 1 if input 2 add 2 box

example

My code

    <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,  
    }
  },
};

Upvotes: 1

Views: 872

Answers (2)

Caliph Hamid
Caliph Hamid

Reputation: 345

This would be a full vue component with your what you want, note that its based on options api and has no styles, those are on yourself:

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

Upvotes: 0

Caliph Hamid
Caliph Hamid

Reputation: 345

You have given little info about how those inputs are supposed to behave exactly, but if we imagine you want to store (and do something with) the value of each, you need an array. and a function that adds as many elements to that array as you put in the input (how you call the function is up to you):

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

Then you need to use v-for to render inputs based on your array :

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

To access the elements you can use index (like inputArray[2].value for the third input's value).

Upvotes: 1

Related Questions