Question

我在$ grade变量中收到了格式正确（$ key =＆gt; $ 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控制器将变量传递给我的View，所以，这对我来说是一个更清洁的方法，在这种情况下不需要ajax。

Answer 1

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

Answer 2

您有两种选择：

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

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

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

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

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

2 个答案: