Question

我将 nuxt-i18n 软件包用于多语言。但是每当我将此软件包添加到nuxt.config.js时， v模型似乎就会出现问题。我创建了一个名为JwInput.vue的自定义输入组件

<template>
  <div>
    <v-text-field 
      :label="floatLabel" 
      :value="model" 
      @input="input()"
      v-model="state"
      :placeholder="placeholder" 
      :type="type" 
      :multi-line="type==='textarea'? true: false"
      :disabled="disabled"
      rows="2"
    />
    <div class="error-container" v-if="formHandle.$error">
      <span class="errorList" v-for="error in errors" :key="error">* {{ $t(errorMessage[error]) }}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      state: '',
    }
  },
  props: [
    'model',
    'type',
    'name',
    'handler',
    'formData',
    'floatLabel',
    'placeholder',
    'disabled'
  ],
  model: {
    prop: 'model',
    event: 'updateModel'
  },
  created() {
    this.state = this.model;
  },
  methods: {
    input() {
      this.$emit('updateModel', this.state);
      this.$emit('change')
    }
  },
  watch: {
    'model': function(){
      this.state = this.model
    }
  },
  computed: {
    errors: function(){
      return Object.getOwnPropertyNames(this.formHandle).filter(x => {
        return this.formHandle[x]===false&&x[0]!=='$';
      });
    },
    formHandle: function () {
      let data = this.name.split('.').reduce((acc, curr) => {
        return acc[curr];
      }, this.handler.form);
      return data;
    },
    errorMessage: function(){
      let data = this.name.split('.').reduce((acc, curr) => {
        return acc[curr];
      }, this.formData.errorMessages);
      return data;
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~assets/stylus/variables.styl';
.error-container {
  text-align: right;
  // color: #db2828;
  font-size: 12px;
  /* width: 100%; */
}
.errorList {
  color: $color-red
  display: block;
  width: 100%;
  margin-top: 5px;
}
</style>

，在登录组件中，我将其用作

<jw-input v-model='form.username' name="username" :handler="$v" :formData="form" placeholder="username" type="text" />

，并且在已安装的生命周期挂钩中，我从cookie中设置了“ form.username”值。

mounted(){
    if(this.$cookie.get('rememberme')){
      let storageData = JSON.parse(this.$cookie.get('rememberme'));

      let passwordDecrypt = CryptoJS.AES.decrypt(storageData.password, storageData.username).toString(CryptoJS.enc.Utf8);
      this.form.username = storageData.
    }
  }

当我console.log“ this.form.username”时，将显示该值。但是v模型在JwInput中发送空值。

注意：当我从nuxt.config.js中删除nuxt-i18n时，eveything效果很好。不知道为什么nuxt-i18n会出现此问题。

数据定义形式：

data() {
    return{
      rememberMe: false,
      form: {
        username: '',
        password: '',
        errorMessages: {
          username: {
            required: 'Required'
          },
          password: {
            required: 'Required'
          }
        }
      }
    }
  },
  validations: {
    form: {
      username: {
        required
      },
      password: {
        required
      }
    }
  },

带有nuxt-i18n软件包的nuxt js中的反应性问题

0 个答案: