Html 呃。响应正文将包含标签和默认值信息。这使得form-a的宽度变得动态 <div id="app"> <v-app id="inspire"> <div class="text-center"> &

呃。响应正文将包含标签和默认值信息。这使得form-a的宽度变得动态

<div id="app">
  <v-app id="inspire">
    <div class="text-center">
      <v-dialog v-model="dialog" width="unset">
        <template v-slot:activator="{ on }">
          <v-btn color="red lighten-2" dark v-on="on">
            Click Me
          </v-btn>
        </template>
        <v-card>
          <v-select v-model="selectedForm" :items="items">
          </v-select>
          <div v-if="selectedForm==='form-a'" class='form-a'>FormA</div>
          <div v-if="selectedForm==='form-b'" class='form-b'>FormB</div>
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn color="primary" text @click="dialog = false">
              I accept
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </div>
  </v-app>
</div> 

new Vue({
  el: "#app",
  vuetify: new Vuetify(),
  data() {
    return {
      selectedForm: "form-a",
      items: ["form-a", "form-b"],
      dialog: false
    };
  }
});

<v-dialog v-model="dialog" :width="forms.find(x => x.name===selectedForm).width">

data() {
    return {
      selectedForm: "form-a",
      items: ["form-a", "form-b"],
      dialog: false,
      forms: [
        {
          name: 'form-a',
          width: 200
        },
        {
          name: 'form-b',
          width: 1000
        }
      ]
    };
  }

  width: fit-content;

.form-a {
  width: fit-content;
  height: 350px;
  background: blue;
}
.form-b {
  width: fit-content;
  height: 500px;
  background: red;
}