时间戳

首页 > 解决方案 > 在 VueJs 中保存输入并给出输出

vue.js - 在 VueJs 中保存输入并给出输出

问题描述

我有数据输入框，可以在旁边的框中自动提供输出。我怎样才能让它只在我点击按钮保存而不是自动显示时显示？

这是输入

input#head(type="text" name="head" required="" minlength="4" maxlength="8" size="10" placeholder="cm" v-model="height")

每当我输入任何内容时，它都会自动在此处输出。我希望它仅在单击保存按钮时显示。

.two
        p Height:
        p.number {{ height }} cm

a.button(@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() {
    this.height = this.newHeight;
    this.newHeight = null;
  }
  }
};

标签： vue.js

解决方案

您必须复制您的对象，一个包含当前状态，另一个包含新状态。按下按钮时，您会更新当前状态。

export default {
  name: "Measurements",
  created() {
    this.newState = JSON.parse(JSON.stringify(this.currentState));
  },
  data () {
    return {
      currentState: { },
      newState: {}
    };
  },
  methods: {
    addItems() {
      this.currentState= JSON.parse(JSON.stringify(this.newState));
    }
  }
};

推荐阅读