小编Joe*_*erg的帖子

如果登录响应代码等于 401 Unauthorized，我想有条件地呈现 v-alert。我的警报定义如下：

<v-alert v-if="this.show" type="error">Invalid email and/or password.</v-alert>

在我的组件的数据部分，我定义了show默认设置为 false 的属性，以不显示 v-alert：

export default {
  name: "logincomponent",
  data() {
    return {
      user: {},
      show: false,
    };
  },

在我的组件的方法部分，我尝试用户身份验证，如果状态代码等于 401，我会更新this.show = true：

methods: {
    login: function() {
      let user = {
        email: this.user.email,
        password: this.user.password
      };
      authService.login(user).then(auth => {
        if (auth.response.status === 401) {
          this.show = true;
        }
      });
    }
  }

我本以为这show是反应式的，因为它是在data()我的组件部分中定义的。

知道我能做些什么来正确地进行条件渲染吗？

预先非常感谢，
查皮·约翰逊

我正在使用 vuetify 为用户的生日做一个日期选择器。我希望我的表单中需要日期选择器并且只接受日期值。这是我尝试过的：

<v-flex xs12>
  <v-menu
    ref="menu"
    v-model="menu"
    :rules="requiredRules"
    :close-on-content-click="false"
    transition="scale-transition"
    offset-y
    full-width
    min-width="290px"
  >
  <template v-slot:activator="{ on }">
    <v-text-field
      :rules="requiredRules"
      v-model="date"
      label="Birthday date"
      append-icon="event"
      outlined
      readonly
      v-on="on"
    ></v-text-field>
  </template>
  <v-date-picker
    ref="picker"
    v-model="date"
    :max="new Date().toISOString().substr(0, 10)"
    min="1950-01-01"
    @change="save"
  ></v-date-picker>
 </v-menu>
</v-flex>

    export default {    
      data() {
        return {
          requiredRules: [v => !!v || "This field is required"],
        }
      }
    }

使用此代码，我无法在日期字段框中键入文本，但它似乎不是必需的。

如果我删除readonly它，那么它就成为必需的，但我可以在日期字段框中键入文本，尽管我的必需规则仍然适用。

如何使日期字段框既必需又不接受文本？

提前致谢。