在 Vue 的 Select 选项中显示来自服务器的对象列表

Question

我在 $grades 变量中收到格式正确 ($key => $value) 的成绩列表

如何使用 Vue 使用此变量填充选择选项输入。

我想我必须将 vue 变量与 : 绑定，但我只是从 vue 开始，我可以找到非常少的基本示例，

<select v-model="grades" class="form-control">
       <option v-for="gradeValue in gradeValues" :gradeValues="{{ $grades /* Laravel Variable */ }}">@{{ gradeValue }}</option>
</select>

编辑：我可以从 Vue 进行 ajax 调用，这不应该那么复杂，但是当页面加载时，我的 Laravel 控制器将变量传递给我的视图，所以，这对我来说是一种更简洁的方法，在这种情况下有不需要ajax。

Answer 1

你有两个选择：

您可以使用刀片的foreach 方法创建option 元素：

@foreach ($grades as $grade)
    <option ...>{{ $grade }}</option>
@endforeach

或者您可以使用您的模板为您的grades 创建一个专用组件并传入$grades 变量。例如：

<grades :grades="{{ $grades }}"></grades>

Answer 2

我认为这对您来说过于复杂，您在这个问题中的代码看起来很接近。你的 Vue 组件和你的刀片在同一个文件中吗？然后就是：

html

<select v-model="selectedGrade" class="form-control">
   <option v-for="(grade, val) in grades" :value="val">@{{ grade }}</option>
</select>

js:

new Vue({
  ...
  data:function(){
    return { 
      grades:{{ $grades }},
      selectedGrade:2 //some default value
    }
  }
  ...
});

如果您的组件位于单独的文件中，您仍然不需要为每个选择下拉菜单使用单独的组件，您只需将所有必需的信息传递到一个组件中。如果没有更好地了解您的应用，我猜它可能是这样的：

<person-data :grades="{{ $grades }}" :categories="{{ $categories }}" :ages="{{ $ages }}"></person-data>

然后是vue组件：

var PersonData = Vue.extend({
  props:['grades','categories','ages']
});