vue编辑用户姓名

<van-cell title="昵称" is-link :value="user.name" @click="isEditNameShow =true"></van-cell>
<!-- 修改用户昵称 -->
    <van-popup v-model="isEditNameShow" position="bottom">
      <van-nav-bar
        title="编辑昵称"
        left-text="取消"
        right-text="确定"
        @click-left="isEditNameShow=false"
        @click-right="onUpdateName"
      />
      <div>
        <!-- field组件有一个value事件，该事件接收一个参数：输入框的值
             在模板中$event表示事件参数，Vue本身提供的 -->
        <van-field
          :value="user.name"
          @input="inputName = $event"
          rows="2"
          autosize
          type="textarea"
          maxlength="20"
          placeholder="请输入昵称"
          show-word-limit
        />
      </div>
    </van-popup>
<script>
export default {
  name: "EditUserINfo",
  components: {},
  props: {},
  data() {
    return {
      user: {
        name: "凯文",
      }, //用户信息
      isEditNameShow: false,
      inputName: ''//输入框数据
    };
  },
  watch: {},
  computed: {
  },
  methods: {
    onUpdateName() {
      // 1.请求提交表单
      // 2.根据结构执行
      this.user.name=this.inputName
      this.isEditNameShow=false
    }
  },
  created() {},
  mounted() {}
};
</script>