在VueJs中保存输入和输出

Question

我有一个数据输入框，在旁边的框里自动给出一个输出，我怎么能让它只在我点击按钮保存时才显示，而不是自动显示？

下面是输入框

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;
  }
  }
};

Answer 1

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

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));
    }
  }
};

Answer 2

只要添加一个新的变量来确定你的输入的可见隐藏状态。你可以通过添加一个新的变量来决定你的输入的可见隐藏状态。v-if 到你的html元素，并调整你的 addItems 方法就这样。

  data: () => {
    return {
       ...
       showHeight: false,
       ...
    };
  },
  methods: {
      addItems() {
        this.showHeight = true;
      }
  }