vue.js - Vuejs 重新绑定一个 Html 选择列表

Question

我有一个数据网格。当用户单击网格中一行的“编辑”按钮时，包含网格的 div 变为不可见（使用v-if），而另一个包含该项目更新表单的 div 变为可见（也使用v-if）。

作为一个附加的复杂功能，“编辑”表单包含一个选择列表。这绑定到一个数组，但是它绑定到的数组会有所不同，这取决于在网格中选择了哪个项目（网格中的项目是不同种类的东西）。

每次单击网格中的项目进行编辑时，如何让该选择列表重新绑定。

我意识到我可以通过制作一个组件来做到这一点，但这对我来说太过分了。

也许一个插槽是答案？不知道如何进行。

这是相关代码：

<b-row v-if="editClaimFormVisible" class="mt-6 justify-content-md-center">
  <b-col cols="6">
    <b-form @submit.prevent="editClaimSubmit">
      <b-form-group label="Enter New Claim Value:">
        <b-form-select v-model="selectedClaimForEdit.claimValue" :options="getClaimOptions()" value-field="id" text-field="name" required>
          <template #first>
            <b-form-select-option :value="null" disabled>-- Please select a claim --</b-form-select-option>
          </template>
        </b-form-select>
      </b-form-group>
      <b-form-group>
        <b-button type="submit" variant="primary">Save</b-button>
      </b-form-group>
    </b-form>
  </b-col>
</b-row>

标签： vue.jsvuejs2