如果特定字段等于某物，如何向表单添加部分?

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>