为什么我不能在 netlify 中运行这个脚本？

Question

我尝试使用 github 运行此代码并使用 netlify 进行部署，但部署后无法单击代码输入，但在我的本地计算机上可以完美运行。我的代码在这里有什么问题？还是netlify无法执行我的js脚本的问题？

<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我尝试在heroku和netlify中运行，但错误是这样的

DOMException: 无法在 'Node' 上执行 'appendChild': 此节点类型不支持此方法。

有人知道如何完美运行代码吗？

Answer 1

似乎有多种原因导致此问题发生（请参阅here 和here）。但是，您的代码中有一些小的语法错误可能会导致此错误。

1. 当使用表格元素时，你需要有一个正确的语法。在您的情况下，您需要用 <table/> 元素包装您的 <tr/>。

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

2. 您必须为v-for 的元素提供v-bind:key，或简称为:key。

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

我做了一个演示at codesandbox，并成功部署到Netlify，没有任何控制台错误。

Answer 2

首先，我认为使用tr 不适合这个。我建议您改用div。如果您使用v-for，请始终添加密钥。

所以你的代码至少应该是这样的。

<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>