vue input v-model 绑定对象为什么没实现数据更新

Question

js

import ApiService from '@/utils/api.js';
import { getParams } from '@/utils/index'
import inputNumber from '@/components/inputNumber'
import $WeValidator from 'we-validator'


export default {
  data() {
    return {
      userinfo: {
        username: null,
        mobile: null,
        email: null
      },
      isValid: false,
    }
  },
  created() {
    this.api = new ApiService();
  },
  mounted() {
    this.id = getParams().id;
    this.initValidator();
  },
  watch: {
    userinfo: {
      handler(val, oldVal) {
        console.log(val, oldVal)
        this.isValid = this.validatorInstance.isValid(val, ['username:required', 'mobile:required']);
      },
      deep: true
    }
  },

  components: {
    inputNumber
  },
  computed: {

  },
  methods: {
    initValidator() {
      this.validatorInstance = new $WeValidator({
        rules: {
          username: {
            required: true,
          },
          mobile: {
            required: true,
            mobile: true
          },
          email: {
            email: true
          },
        },
        messages: {
          username: {
            required: "请输入姓名",
          },
          mobile: {
            required: "请输入手机号",
            mobile: "手机号无效"
          },
          email: {
            email: "邮箱无效"
          },
        },
      })
    },
    submit(e) {
      console.log(e)
      let { value } = e.target;
      console.log(value)
      console.log(this.validatorInstance.checkData(value))
    }
  },
  onShareAppMessage(res) {
    return {
      imageUrl: '',
      title: '快来参加首图的活动鸭',
      path: `/pages/event/detail?id=${this.id}`
    }
  }
}

vue

<template>
  <div class="event-form-page-wrap">
    <form @submit="submit">
      <div class="weui-cells weui-cells_after-title">
        <div class="weui-cell weui-cell_input">
          <div class="weui-cell__hd">
            <div class="weui-label">姓名{{userinfo.username}}</div>
          </div>
          <div class="weui-cell__bd">
            <input
              class="weui-input"
              type="text"
              v-model="userinfo.username"
              name="username"
              placeholder="请输入姓名"
            />
          </div>
        </div>
        <div class="weui-cell weui-cell_input">
          <div class="weui-cell__hd">
            <div class="weui-label">手机</div>
          </div>
          <div class="weui-cell__bd">
            <input
              class="weui-input"
              type="number"
              v-model="userinfo.mobile"
              name="mobile"
              placeholder="请输入停手机号"
            />
          </div>
        </div>
        <div class="weui-cell weui-cell_input">
          <div class="weui-cell__hd">
            <div class="weui-label">邮箱</div>
          </div>
          <div class="weui-cell__bd">
            <input
              class="weui-input"
              type="text"
              v-model="userinfo.email"
              name="email"
              placeholder="请输入邮箱"
            />
          </div>
        </div>
      </div>
      <div class="weui-btn-area">
        <button
          class="weui-btn btn-submit"
          type="primary"
          form-type="submit"
          :disabled="!isValid"
        >提交</button>
      </div>
    </form>
  </div>
</template>

<script src='./index.page.js'></script>

<style scoped src='./index.page.css'></style>

现在

不知道为什么没实现双向绑定~~

Answer 1

改一下开发工具的基础库吧，你是用的最新的基础库吧

Answer 2

我发现 真机是可以的 但是微信开发者工具小程序的模拟器不行 不知道什么鬼