Why I cannot run this script in the netlify?

Question

I tried to run this code with github and deploy using the netlify but after deploying the code input cant be clicked but in my local machine it can be run perfectly. What is the problem of my code here? Or the problem that netlify cant execute my js script?

<template>
  <v-layout
    column
    justify-center
    align-center
  >
  <h3> Kalkulator Belian Semula 916</h3>
  <br>
<v-alert
      
      text
      type="info"
    >
      Sila masukkan berat barang kemas <strong>916</strong> anda!
    </v-alert>
    <v-flex
      xs12
      sm8
      md6
    >
    
      <tr v-for="(item, index) in items">
        <td>
          <v-text-field
            label="Weight"
            placeholder="Weight 916"
            type="number"
            suffix="gram"
            solo-inverted
            v-model.number="item.qty"
          ></v-text-field></td>
          
          
          
         
          <!--
          <td><v-btn small icon @click="addRow(index)"><v-icon>mdi-plus</v-icon></v-btn></td>
          <td><v-btn small icon @click="removeRow(index)"><v-icon>mdi-minus</v-icon></v-btn></td>
-->
         
          <tr>
         
         
       
         
         <td><v-btn x-large color="red" block readonly>Total = RM {{total}}</v-btn></td>
       </tr>
       </tr>
    </v-flex>
  </v-layout>
</template>

<script>


export default {
data () {
    return {
      // dummy data
        items: [
        {qty: 1, price: 0 },
        
        ],
    }
  },
   computed: {
        subtotalRow() {
          return this.items.map((item) => {
            return Number(item.qty * 215)
          });
        },
        total() {
          return this.items.reduce((total, item) => {
            return total + item.qty *215;
          }, 0);
        }
    },
    methods: {
        addRow(index) {
            this.items.splice(index + 1, 0, {
            qty: 1,  price: 0
            });
        },
        removeRow(index) {
            this.items.splice(index, 1);
        }
    } 
}

</script>

Here the link to the sample running application I have try to run in heroku and netlify but the error came out like this

DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.

Do anyone know how to run the code perfectly?

Answer 1

It seems that there are various reasons as to why this problem occurs (see here and here). However, there are some minor syntax errors in your code that might contribute to this error.

1. When using table elements, you need to have a proper syntax for that. In your case, you need to wrap your <tr/> with the <table/> element.

   <table>
     <tr>
       <td>...</td>
       <td>...</td>
       ...
     </tr>
   
     <tr>
       <td>...</td>
       <td>...</td>
       ...
     </tr>
   </table>
   

2. You must provide a v-bind:key, or simply :key, to the elements of v-for.

   <tr v-for="(item, i) in items" :key="i">
     ...
   </tr>
   

I made a demo at codesandbox, and deployed it to Netlify successfully without any console errors.

Answer 2

First of all, I think using tr is not suited for this. I recommend that you use div instead. And always add keys if your using v-for.

So your code should at least look like this.

<v-layout column justify-center align-center >
        <h3> Kalkulator Belian Semula 916</h3>
        <v-alert text type="info">
            Sila masukkan berat barang kemas <strong>916</strong> anda!
        </v-alert>
        <v-flex xs12 sm8 md6 >
          <div v-for="(item, index) in items" :key="index">
            <div>
              <v-text-field
                label="Weight"
                placeholder="Weight 916"
                type="number"
                suffix="gram"
                solo-inverted
                v-model.number="item.qty"
              ></v-text-field></div>
          </div>
          <div>
            <v-btn x-large color="red" block readonly>Total = RM {{total}}</v-btn>
          </div>
        </v-flex>
</v-layout>