vue.js - 使用 Vue 保存输入并显示在其他字段上

Question

我无法为此设置方法。我希望输入数据在单击保存按钮后显示在我的表上。我是否朝着正确的方向前进。因为它现在显示在表格上而无需单击保存。有人可以帮我写代码吗？谢谢。

                  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() {

  }
  }
};

标签： vue.jsvuejs2pug

Answer 1

您应该添加一些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>&Lstrok;ydka:</p>
          <p class="number2">{{ calve }} cm</p>
        </div>
        <div class="two">
          <p>Masa ko&sacute;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>