title: How to dynamically add textbox on button click in Vue Js
body: <p>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.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;CRow&gt;
    &lt;CCol sm=&quot;6&quot;&gt;
      &lt;CDropdown toggler-text=&quot;My Test&quot;&gt;
        &lt;CDropdownHeader&gt;--Select--&lt;/CDropdownHeader&gt;
        &lt;CDropdownItem
          v-for=&quot;(value, key) in keys_with_empty_value&quot;
          :key=&quot;key&quot;
          &gt;{{ key }}&lt;/CDropdownItem
        &gt;
      &lt;/CDropdown&gt;
    &lt;/CCol&gt;
    &lt;CCol sm=&quot;6&quot;&gt;
      &lt;CButton :color=&quot;'info'&quot; @click=&quot;addtextbox&quot;&gt; Add &lt;/CButton&gt;
    &lt;/CCol&gt;
  &lt;/CRow&gt;
  &lt;CRow&gt;
    &lt;CCol
      sm=&quot;6&quot;
      v-for=&quot;(value, key, index) in keys_with_not_empty_value&quot;
      :key=&quot;key&quot;
    &gt;
      &lt;CInput :label=&quot;key&quot; type=&quot;text&quot; v-model=&quot;keys_with_not_empty_value[key]&quot; /&gt;
    &lt;/CCol&gt;
  &lt;/CRow&gt;
  </code></pre>
  <p>and my click event is :</p>
  <pre class="lang-js prettyprint-override"><code>    methods:{
      addtextbox() {
            this.keys_with_not_empty_value.system_dummy_data = &quot;&quot;;
          },
      }
  </code></pre>
  <p>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.</p>
  <p>Any suggestions would be appreciated.</p>