如何在Vue.js循环渲染的表单下拉选择框中回显旧数据

嘿，我来帮你搞定这个Vue循环渲染下拉框的旧数据回显问题！你之前用Laravel的old()方法处理普通下拉框很顺畅，但Vue循环的下拉框因为依赖make的动态选项，需要稍微调整下思路——核心是把后端的旧值传递给Vue的响应式变量，让v-model自动帮我们选中对应选项。

步骤1：回显关联的make值（关键前提） #

因为你的model_options是按make分组的，如果make的旧值没回显，model_options[make]就加载不出对应的车型选项，model的旧值自然也没法匹配。所以首先要确保make的旧值正确初始化到Vue中：

<!-- Make下拉框 -->
<select class="form-control" name="make" id="make" v-model="make">
  <option value="">Select Make</option>
  <option v-for="makeOption in make_options" :value="makeOption.id" :key="makeOption.id">@{{ makeOption.text }}</option>
</select>

步骤2：初始化Vue的响应式变量 #

在Vue实例的data里，用Laravel的old()方法把旧值传递给make和model变量。这里推荐用json_encode来处理，避免字符串转义的问题：

new Vue({
  el: '#app',
  data: {
    // 初始化make为旧值，没有的话设为null/空字符串
    make: {!! json_encode(old('make')) !!},
    // 初始化model为旧值
    model: {!! json_encode(old('model')) !!},
    // 你的车型选项数据（假设从后端传递过来）
    model_options: {!! json_encode($modelOptions) !!},
    // 你的品牌选项数据
    make_options: {!! json_encode($makeOptions) !!}
  }
});

步骤3：调整Model下拉框的模板（可选但推荐） #

为了避免make未选择时model_options[make]不存在导致的报错，可以加个判断，同时新增默认选项：

<!-- Model下拉框 -->
<select class="form-control" name="model" id="model" v-model="model" v-if="model_options[make]">
  <option value="">Select Model</option>
  <option v-for="option in model_options[make]" :value="option.id" :key="option.id">@{{ option.text }}</option>
</select>

为什么这样能生效？ #

Vue的v-model是双向绑定，当你把model的初始值设为old('model')，同时make的旧值加载出对应的车型选项后，Vue会自动匹配model的值和选项的value，从而自动选中对应的选项，完美实现旧数据回显！

内容的提问来源于stack exchange，提问作者sameera