首页 文章

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

提问于
浏览 次
1

我在$ 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控制器将变量传递给我的View，所以，这对我来说是一个更清洁的方法，在这种情况下没有必要为了ajax .

laravel vue.js

2 回答

  • 1

    你有两个选择：

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

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

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

    <grades :grades="{{ $grades }}"></grades>
    回复于
  • 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']
});
    回复于

相关问题