我在如何设置方法上遇到了麻烦。我希望在点击保存按钮后,输入的数据能显示在我的表格上。我的方向是否正确。因为现在没有点击保存就显示在表上了。谁能帮我写写代码吗,谢谢。
h3 Previous measurements
.card.mt-3.p-3
.row
.col-md-6
.two
p Wzrost:
p.number {{ height }} cm
.two
p Szyja:
p.number {{ neck }} cm
.two
p Biceps:
p.number {{ biceps }} cm
.two
p Biodro:
p.number {{ hips }} cm
.two
p.mb-0 Udo:
p.number {{ quad }} cm
.col-md-6.pl-0
.two
p Klatka:
p.number2 {{ chest }} cm
.two
p Talia:
p.number2 {{ waist }} cm
.two
p Łydka:
p.number2 {{ calve }} cm
.two
p Masa kości:
p.number2 {{ boneweight }} kg
.two
p.mb-0 Waga:
p.number2(class="class=mb-0") {{ bodyweight }} kg
.row
.col-xl-12.text-center.mt-5.mb-5
a.button.skipbtn(@click="addItems") Save
export default {
name: "Measurements",
data: () => {
return {
height: null,
neck: null,
biceps: null,
hips: null,
quad: null,
chest: null,
waist: null,
calve: null,
boneweight: null,
bodyweight: null
};
},
methods: {
addItems() {
}
}
};
你应该添加一些 state
属性,用于控制何时显示表格数据
new Vue({
el: "#app",
data: () => {
return {
visible: false,
height: null,
neck: null,
biceps: null,
hips: null,
quad: null,
chest: null,
waist: null,
calve: null,
boneweight: null,
bodyweight: null
}
},
methods: {
addItems() {
this.visible = true
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div id="app">
<h3>Previous measurements</h3>
<div class="card mt-3 p-3">
<div v-if="visible" class="row">
<div class="col-md-6">
<div class="two">
<p>Wzrost:</p>
<p class="number">{{ height }} cm</p>
</div>
<div class="two">
<p>Szyja:</p>
<p class="number">{{ neck }} cm</p>
</div>
<div class="two">
<p>Biceps:</p>
<p class="number">{{ biceps }} cm</p>
</div>
<div class="two">
<p>Biodro:</p>
<p class="number">{{ hips }} cm</p>
</div>
<div class="two">
<p class="mb-0">Udo:</p>
<p class="number">{{ quad }} cm</p>
</div>
</div>
<div class="col-md-6 pl-0">
<div class="two">
<p>Klatka:</p>
<p class="number2">{{ chest }} cm</p>
</div>
<div class="two">
<p>Talia:</p>
<p class="number2">{{ waist }} cm</p>
</div>
<div class="two">
<p>Łydka:</p>
<p class="number2">{{ calve }} cm</p>
</div>
<div class="two">
<p>Masa kości:</p>
<p class="number2">{{ boneweight }} kg</p>
</div>
<div class="two">
<p class="mb-0">Waga:</p>
<p class="number2 class=mb-0">{{ bodyweight }} kg</p>
</div>
</div>
</div>
<div v-else class="row">
<div class="col-xl-12 text-center mt-5 mb-5">
<a class="button skipbtn" @click.prevent="addItems()">Save</a>
</div>
</div>
</div>
</div>