时间戳

首页 > 解决方案 > 如何一起使用 :value 和 v-model

vue.js - 如何一起使用 :value 和 v-model

问题描述

我需要一起使用 :value 和 v-model 。我有一个表单，在以下组件上我收到一个“年龄”作为查询参数，因为我正在其他地方填写以前的输入。我希望那个年龄自动填充这个组件的输入。但是如果用户改变了这个值呢？我想重新存储那个新时代并将其发送到父 .Vue 文件。我怎样才能做到这一点？

换句话说：如果我的年龄是“3”，自动填充的输入显示一个“3”，但随后用户注意到他们想写“30”而不是“3”怎么办？如何保存 30 而不是“3”？

提前致谢

<template>
  <div>
      <p>age</p>
      <input type="text" :value="age" v-model="age_keyup" @keyup="send()">
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      age_keyup: null,
    }
  },
  methods: {
    send(){
       this.$emit("age_keyup", this.age);
    }
  },
  props: ['age']
}
</script>

标签： vue.js

解决方案

无需将值绑定到该道具，只需age_keyup基于以下内容进行初始化age：

<template>
  <div>
      <p>age</p>
      <input type="text"  v-model="age_keyup" @keyup="send()">
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      age_keyup:null,
    }
  },
  methods: {
    send(){
       this.$emit("age_keyup", this.age_keyup);
    }
  },
  props: ['age'],
   mounted(){
     this.age_keyup=this.age
  }
}
</script>

推荐阅读