Vue.js 为什么我不能在netlify中运行此脚本?

Vue.js 为什么我不能在netlify中运行此脚本?,vue.js,vuejs2,nuxt.js,nuxtjs,Vue.js,Vuejs2,Nuxt.js,Nuxtjs,我尝试使用github运行此代码,并使用netlify进行部署,但部署后无法单击代码输入,但在我的本地计算机上可以完美运行。我的代码在这里有什么问题?还是netlify无法执行我的js脚本的问题 <template> <v-layout column justify-center align-center > <h3> Kalkulator Belian Semula 916</h3> <br>

我尝试使用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>
我试着在heroku和netlify中运行,但错误是这样出现的

DomeException:未能在“节点”上执行“appendChild”:此节点类型不支持此方法


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

关于出现此问题的原因,似乎有各种各样的原因,请参见。但是,代码中存在一些可能导致此错误的小语法错误

在使用表元素时,需要有一个适当的语法。在您的情况下,您需要用元素包装您的文档

... ... ... ... ... ... 您必须为v-for的元素提供一个v-bind:key或简称:key

...
我制作了一个演示,并成功地将其部署到,没有任何控制台错误。

似乎有各种原因导致出现此问题,请参见。但是,代码中存在一些可能导致此错误的小语法错误

在使用表元素时,需要有一个适当的语法。在您的情况下,您需要用元素包装您的文档

... ... ... ... ... ... 您必须为v-for的元素提供一个v-bind:key或简称:key

...
我制作了一个演示,并成功地将其部署到了控制台,没有任何控制台错误。

首先,我认为使用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>

首先,我认为使用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>

谢谢你的回答,这对我很有帮助^ ^谢谢你的回答,这对我很有帮助^ ^ ^谢谢你,部署成功,^ ^谢谢你,顺便说一句,部署成功^_^