javascript - v 形式的条件句

Question

我对 vue.js 很陌生。我正在尝试对文本字段应用一些验证。这是表格的样子。

我需要应用一些条件，以便如果用户输入源 IP 但未输入目标 IP，则需要目标端口，但是如果用户输入源 IP 和目标 IP，则不需要目标端口。可能吗？

代码：

<template>
  <v-container fluid>
    <v-card class="ma-3 pa-3">
      <v-card-title primary-title>
        <div class="headline primary--text">Firewall Logs</div>
      </v-card-title>
      <v-card-text>
          <v-form v-model="valid" ref="form" lazy-validation>
            <v-text-field
                label="Source IP"
                v-model="sourceip"
                v-validate="'required_if|ip'"
                data-vv-name="sourceip"
                :error-messages="errors.collect('sourceip')"
                required
            ></v-text-field>
            <v-text-field
                label="Destination IP"
                v-model="destinationip"
                v-validate="'required_if: '"
                data-vv-name="destinationip"
                :error-messages="errors.collect('destinationip')"
                required
            ></v-text-field>
            <v-text-field
                label="Destination Port"
                v-model="destinationport"
                v-validate="{  regex: /^(\*[0-9]{1,4}|[1-5][0-9]{4}|6[0-4][0-9]{3}|65[0-4][0-9]{2}|655[0-2][0-9]|6553[0-5])$/}"
                data-vv-name="destinationport"
                hint="Enter port number between 0 and 65535 or '*' if port is unknown"
                :error-messages="errors.collect('destinationport')"
            ></v-text-field>
            <v-select
                item-value="string"
                v-model="day"
                :items="days"
                label="Days To Search"
                hint="Go back up to 7 days to expand the query"
                v-on:change="reset"
            ></v-select>
          </v-form>
      </v-card-text>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn small color="error" @click="cancel">Cancel</v-btn>
        <v-btn small color="warning" @click="reset">Reset</v-btn>
        <v-btn small color="success" @click="submit" :disabled="!valid">
          Submit
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-container>
</template>

标签： javascripttypescriptvue.jsvuetify.js