title: Data not display inside vuetify v-text-field with Nuxt & Firestore
body: <p>this is a related question which I've asked before:
  <a href="https://stackoverflow.com/questions/69748818/get-document-data-from-firestore-and-show-the-data-into-each-of-the-form-input-f">Get document data from Firestore and show the data into each of the form input field using Nuxt &amp; Vuetify</a></p>
  <p>I want the data that I've submitted to display on the v-text-field input.</p>
  <p><a href="https://i.stack.imgur.com/Igjh8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Igjh8.png" alt="my v-text-field input" /></a></p>
  <p>As you can see from the image, I can submit my form and I can get the data accordingly.</p>
  <p>Name: siradley_   &lt;-- this come from my firestore</p>
  <p>but I want it to display inside the v-text-field input, not outside the input field.</p>
  <p>Currently, I still not know how to do it.</p>
  <p>Any help on how to do it?</p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
      &lt;div&gt;
          &lt;v-container&gt;
              &lt;v-layout&gt;
                  &lt;v-flex&gt;
                      &lt;v-card&gt;
                          &lt;v-card-text&gt;
                              &lt;v-form&gt;
                                  &lt;v-layout&gt;
                                      &lt;v-row&gt;
                                          &lt;v-col cols=&quot;12&quot; sm=&quot;6&quot; md=&quot;6&quot; v-for=&quot;(test, id) in Test&quot;&gt;
                                              &lt;v-text-field
                                              v-model=&quot;editedItem.name&quot;&gt;{{ test.name }}&lt;/v-text-field&gt;
                                              &lt;p&gt;Name: {{ test.name }}&lt;/p&gt;
                                          &lt;/v-col&gt;
                                          &lt;v-col cols=&quot;12&quot; sm=&quot;6&quot; md=&quot;6&quot;&gt;
                                              &lt;v-btn @click=&quot;test&quot;&gt;Test&lt;/v-btn&gt;
                                          &lt;/v-col&gt;
                                      &lt;/v-row&gt;
                                  &lt;/v-layout&gt;
                              &lt;/v-form&gt;
                          &lt;/v-card-text&gt;
                      &lt;/v-card&gt;
                  &lt;/v-flex&gt;
              &lt;/v-layout&gt;
          &lt;/v-container&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  <p>my script</p>
  <pre class="lang-html prettyprint-override"><code>&lt;script&gt;
  import firebase from &quot;firebase/app&quot;;
  import firestore from &quot;@/plugins/firebasetest&quot;;
  
  export default {
      middleware: &quot;authentication&quot;,
      layout: 'dashboard',
  
      data: () =&gt; ({
          Test: [
              {
                  name: '',
              }            
          ],
  
          editedItem: {
              name: '',
          } 
      }),
  
      created() {
          this.readTest();
      },
  
      methods: {
          readTest() {
              this.Test = [];
              firestore
                  .collection('test')
                  .doc(firebase.auth().currentUser.uid)
                  .get()
                  .then((doc) =&gt; {
                      this.Test.push({ ...doc.data(), id: doc.id });
                      console.log({ ...doc.data(), id: doc.id });
                  })
          },
  
          test() {
              var data = {
                  name: this.editedItem.name,
              }
              firestore
              .collection('test')
                  .doc(firebase.auth().currentUser.uid)
                  .set(data)
                  .then((doc) =&gt; {
                  window.location.reload();
                  console.log({ ...doc.data, id: doc.id })
              })
          },
      },
  }
  &lt;/script&gt;
  </code></pre>