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

我收到 $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 控制器将变量传递给我的视图，所以，这对我来说是一种更干净的方法，在这种情况下不需要对于阿贾克斯。

我认为这对你来说太复杂了，你在这个问题中的代码看起来很接近。您的 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']
});