Vue.js 为什么我不能在netlify中运行此脚本?
我尝试使用github运行此代码,并使用netlify进行部署,但部署后无法单击代码输入,但在我的本地计算机上可以完美运行。我的代码在这里有什么问题?还是netlify无法执行我的js脚本的问题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>
<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>
谢谢你的回答,这对我很有帮助^ ^谢谢你的回答,这对我很有帮助^ ^ ^谢谢你,部署成功,^ ^谢谢你,顺便说一句,部署成功^_^