如果特定字段等于某项，如何将部分添加到表单？

Question

我试图仅在某个字段等于某个字段时才向表单添加一个部分，在我的例子中，我正在制作一个表单来创建一个问题，如果这个问题的响应类型被选择为是多个选项我希望新部分能够创建这些选项，但前提是选择了该响应类型。

这是我现在的表格

<el-dialog
    :title="modalTitle"
    :loading="loading"
    :visible="dialogFormVisible"
    :visible.sync="dialogFormVisible">

    <el-form label-position="top" ref="form" :model="form" :rules="rules">
        <el-row>
            <el-form-item label="Question" prop="question">
                <el-input v-model="form.question"></el-input>
            </el-form-item>
        </el-row>

        <el-row>
            <el-col :span="12">
                <el-form-item label="Section" prop="survey_section_id">
                    <el-select v-model="form.survey_section_id" placeholder="Select">
                        <el-option
                            v-for="section in survey_section"
                            :key="section.id"
                            :label="section.title"
                            :value="section.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="Response Type" prop="response_type_id">
                    <el-select v-model="form.response_type_id" placeholder="Select">
                        <el-option
                            v-for="type in response_type"
                            :key="type.id"
                            :label="type.type"
                            :value="type.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="8">
                <el-form-item label="Optional" prop="optional">
                    <el-switch
                        v-model="form.optional"
                    ></el-switch>
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
    <span slot="footer">
        <el-button
            type="info"
            @click="cancel()">Cancelar
        </el-button>
        <el-button
            type="primary"
            :loading="loading"
            @click="submit('form')">Guardar
        </el-button>
    </span>
</el-dialog>

当响应类型的 el-select 设置为多个选项时，我希望另一个部分出现在可以创建这些选项并将其保存到问题的表单中。

我已经尝试过类似的代码和类似的代码，只是想看看它是否会出现，但没有任何反应。

<el-row>
    <div v-if="this.response_type_id === 2">
        <h1>hi</h1>
    </div>
</el-row>

<el-row>
    <div v-if="response_type_id === 2">
        <h1>hi</h1>
    </div>
</el-row>

如有任何帮助，我将不胜感激，如果您希望看到我拥有的任何其他代码，请直接提问，我将编辑问题并添加。

Answer 1

问题似乎是您试图直接用 v-if="response_type_id === 2 引用 form 对象的属性您应该像这样使用它。

<el-row>
    <div v-if="form.response_type_id === 2">
        <h1>hi</h1>
    </div>
</el-row>

如果特定字段等于某项，如何将部分添加到表单？

How to add a section to a form if a specific field is equal to something?

laravel

vue.js

element-ui