如何使用 vuetify 网格构建这样的布局？答案

【问题标题】：how can I build such a layout using vuetify grid?如何使用 vuetify 网格构建这样的布局？
【发布时间】：2020-05-05 11:47:12
【问题描述】：

我正在尝试使用 vuetify 网格构建下面的表单。

到目前为止，我只能做到这一点：

     <v-row>
        <v-col cols="8">
          <v-container>
            <v-row no-gutters>
              <v-col cols="12" class="d-flex">
                <v-text-field
                  name="title"
                  label="نام فارسی محصول"
                  outlined
                  placeholder=" "
                  v-model="products.title"
                  class="ml-1"
                ></v-text-field>
                <v-text-field
                  name="subtitle"
                  label="نام انگلیسی محصول"
                  outlined
                  placeholder=" "
                  v-model="products.subtitle"
                  class="ml-1"
                ></v-text-field>
                <v-text-field
                  name="image"
                  label="آدرس عکس محصول"
                  outlined
                  placeholder=" "
                  v-model="products.image"
                ></v-text-field>
              </v-col>
              <v-col cols="12">
                <v-textarea
                  name="description"
                  outlined
                  label="توضیحات محصول"
                  placeholder=" "
                  v-model="products.description"
                ></v-textarea>
              </v-col>
            </v-row>
          </v-container>
        </v-col>
        <v-col cols="4">
          <v-img :src="require('@/assets/images/upload.png')"></v-img>
        </v-col>
        <v-col cols="12">
          <v-divider light></v-divider>
        </v-col>
      </v-row>

我无法将表单与上传图像的边缘对齐，我无法让 textarea 占据整个高度。有谁知道我如何使用 vuetify 实现这样的布局？谢谢你。

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

你应该把你的代码放在v-app标签中，比如this codepen sample

【讨论】：