How to dynamically add textbox on button click in Vue Js

Question

I have an object with key-value pair which I have used to generate textboxes using key as the label and value as the textbox value using the v-for loop. I want to add a new textbox on add button click. Here's the code.

<CRow>
  <CCol sm="6">
    <CDropdown toggler-text="My Test">
      <CDropdownHeader>--Select--</CDropdownHeader>
      <CDropdownItem
        v-for="(value, key) in keys_with_empty_value"
        :key="key"
        >{{ key }}</CDropdownItem
      >
    </CDropdown>
  </CCol>
  <CCol sm="6">
    <CButton :color="'info'" @click="addtextbox"> Add </CButton>
  </CCol>
</CRow>
<CRow>
  <CCol
    sm="6"
    v-for="(value, key, index) in keys_with_not_empty_value"
    :key="key"
  >
    <CInput :label="key" type="text" v-model="keys_with_not_empty_value[key]" />
  </CCol>
</CRow>

and my click event is :

    methods:{
    addtextbox() {
          this.keys_with_not_empty_value.system_dummy_data = "";
        },
    }

I am adding new key in my object which I used in v-for and generated other textboxes. To my understanding to vue-js if I change any data in vue script part it should reflect on HTML part. but my v-for loop is not updating and I am not able to see new textbox for the newly added key.

Any suggestions would be appreciated.

tony19 tony19 · Accepted Answer · 2021-07-14T06:14:18

Your code seems to work in this demo 1, but it only adds one new textbox because addtextbox only inserts a specific key (instead of a new unique key).

However, the component names suggest you're using Core UI, which currently (v3.1.4) only works with Vue 2. In Vue 2, newly added object keys are not automatically detected, so you would need to use vm.$set to insert the new key:

export default {
  methods:{
    addtextbox() {
      //this.keys_with_not_empty_value.system_dummy_data = "";
      this.$set(keys_with_not_empty_value, "system_dummy_data", "");
    },
  }
}

demo 2

How to dynamically add textbox on button click in Vue Js

1 Answers