1

我尝试使用 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中运行的示例运行应用程序的链接，但错误是这样出现的

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

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

4

2 回答 2

3

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

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

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

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

  2. 您必须为的元素提供一个v-bind:key，或者简单地说。:keyv-for

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

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

于 2020-09-15T03:26:45.817 回答
1

首先，我认为 usingtr不适合这个。我建议您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>
于 2020-09-15T03:51:55.100 回答