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

Question

我正在尝试使用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>

我在将表格与上传图像的边缘对齐时遇到问题，并且无法使文本区域占据整个高度。有谁知道如何使用vuetify实现这种布局？谢谢。

Answer 1

您应将代码放入this codepen sample之类的v-app标记中