title: How to add text-field in datatable column without using <td> in vue.js
body: <p>I am making a shopping cart using Vuetify's current <a href="https://vuetifyjs.com/en/components/data-tables/" rel="nofollow noreferrer">CRUD Datatable UI Component</a> (compatible with Vue.js2), and I'm trying to add a <code>type=&quot;number&quot;</code> text-field for both columns <code>quantity</code> and <code>price</code> and link them to their respective value to calculate their total.</p>
  <p>Here you can see how it can <em><strong>add</strong></em>, <em><strong>calculate a total</strong></em> from 2 static values (which I was using temporarily to test the subtotal calculation with a computed function), <em><strong>and delete</strong></em> with no problem in the following code:</p>
  <p><strong>HTML:</strong></p>
  <pre><code>&lt;template&gt;
    &lt;v-layout align-start&gt;
      &lt;v-flex&gt;
        &lt;v-container grid-list-sm class=&quot;pa-4 white&quot;&gt;
          &lt;v-layout row wrap&gt;
            &lt;v-flex xs12 sm8 md8 lg8 xl8&gt;
              &lt;v-text-field v-model=&quot;code&quot; label=&quot;Barcode&quot; @keyup.enter=&quot;searchBarcode()&quot;&gt;
              &lt;/v-text-field&gt;
            &lt;/v-flex&gt;
            &lt;v-flex xs12 sm12 md12 lg12 xl12&gt;
              &lt;v-data-table 
                :headers=&quot;headerDetails&quot; 
                :items=&quot;detailsWithSubTotal&quot; 
                hide-default-footer 
                class=&quot;elevation-1&quot;
              &gt;
                &lt;template v-slot:item.delete=&quot;{ item }&quot;&gt;
                    &lt;v-icon small class=&quot;ml-3&quot; @click=&quot;deleteDetail(details, item)&quot;&gt;
                        delete
                    &lt;/v-icon&gt;
                &lt;/template&gt;
                &lt;template v-slot:no-data&gt;
                  &lt;h3&gt;There are no current products added on details.&lt;/h3&gt;
                &lt;/template&gt;
              &lt;/v-data-table&gt;
            &lt;/v-flex&gt;
          &lt;/v-layout&gt;
        &lt;/v-container&gt;
      &lt;/v-flex&gt;
    &lt;/v-layout&gt;
  &lt;/template&gt;
  </code></pre>
  <p><strong>JAVASCRIPT:</strong></p>
  <pre><code>&lt;script&gt;
  import axios from 'axios'
  export default {
    data() {
      return {
        headerDetails: [
          { text: 'Remove', value: 'delete', sortable: false },
          { text: 'Product', value: 'product', sortable: false },
          { text: 'Quantity', value: 'quantity', sortable: false },
          { text: 'Price', value: 'price', sortable: false },
          { text: 'Subtotal', value: 'subtotal', sortable: false }
        ],
        details: [],
        code: ''
      }
    },
    computed: {
      detailsWithSubTotal() {
        return this.details.map((detail) =&gt; ({
          ...detail,
          subtotal: detail.quantity * detail.price,
          source: detail
        }))
      }
    },
    methods: {
      searchBarcode() {
        axios
          .get('api/Products/SearchProductBarcode/' + this.code)
          .then(function(response) {
            this.addDetail(response.data)
          })
          .catch(function(error) {
            console.log(error)
          })
      },
      addDetail(data = []) {
        this.details.push({
          idproduct: data['idproduct'],
          product: data['name'],
          quantity: 10,
          price: 150
        })
      },
      deleteDetail(arr,item){
          var i= arr.indexOf(item.source);
          if (i!==-1){
              arr.splice(i,1);
          }
      },
    }
  }
  &lt;/script&gt;
  </code></pre>
  <p>In the example that I've been using as a reference to build this shopping cart, he does not display the data from javascript, but from HTML using <code>&lt;td&gt;</code> and <code>props.items</code> as you can see in the code below:</p>
  <p><strong>Previous Version</strong> (this example I found is from a previous version of vue.js from 2 years old):</p>
  <pre><code>&lt;template slot=&quot;items&quot; slot-scope=&quot;props&quot;&gt;
      &lt;td class=&quot;justify-center layout px-0&quot;&gt;
          &lt;v-icon small class=&quot;ml-3&quot; @click=&quot;deleteDetail(details, props.item)&quot;&gt;
              delete
          &lt;/v-icon&gt;
      &lt;/td&gt;
      &lt;td&gt;{{ props.item.product }}&lt;/td&gt;
      &lt;td&gt;&lt;v-text-field type=&quot;number&quot; v-model=&quot;props.item.quantity&quot;&gt;&lt;/v-text-field&gt;&lt;/td&gt;
      &lt;td&gt;&lt;v-text-field type=&quot;number&quot; v-model=&quot;props.item.price&quot;&gt;&lt;/v-text-field&gt;&lt;/td&gt;
      &lt;td&gt;$ {{ props.item.quantity * props.item.price }}&lt;/td&gt;
  &lt;/template&gt;
  </code></pre>
  <p>This is how his example turns out looking:</p>
  <p><a href="https://i.stack.imgur.com/19XFT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/19XFT.png" alt="enter image description here" /></a></p>
  <p>While this is how my datatable looks like with my code (while using the hard-coded <code>quantity</code> and <code>price</code> values):</p>
  <p><a href="https://i.stack.imgur.com/6YWmP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6YWmP.png" alt="enter image description here" /></a></p>
  <p>Since I'm not using any <code>&lt;td&gt;</code> or any <code>props</code>, how can I implement a text-field in the datatable and link them to their value for it to be able to calculate the product total?</p>