为什么我不能在 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: Failed to execute 'appendChild' on 'Node': This node type does not support this method.

有谁知道如何运行完美地编写代码？

Answer 1

出现这个问题似乎有多种原因（参见here and here）。但是，您的代码中存在一些可能导致此错误的小语法错误。

当使用 table 元素时，您需要有正确的语法。在您的情况下，您需要用 <table/> 元素包裹 <tr/>。

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

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

您必须为 v-for.
的元素提供 v-bind:key，或简单地 :key
```
<tr v-for="(item, i) in items" :key="i">
  ...
</tr>
```

我成功制作了演示 at codesandbox, and deployed it to 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>

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

Why I cannot run this script in the netlify?

vue.js

vuejs2

nuxt.js

nuxtjs

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

Why I cannot run this script in the netlify?

vue.js

vuejs2

nuxt.js

nuxtjs

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