在 Vuejs 中，如何将选择选项绑定到对象

Question

我正在尝试在模板中使用插值，像正常一样选择选项

<select class="form-control" id="staff" name="staff">
     <option selected disabled>- Select -</option>
  @foreach($staff as $aStaff)
     <option value="{{$aStaff->id}}">{{$aStaff->initials}}</option>
  @endforeach
</select>

编译错误很清楚

 Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead.

但我仍然不确定正确的用法。 Vue 文档只是给出了示例

<select v-model="selected">
 <!-- inline object literal -->
 <option v-bind:value="{ number: 123 }">123</option>
</select>

但是我不确定如何将其转换为使用上面我需要的foreach

这样的东西是无效的

<option :value="$aStaff->id">{{$aStaff->initials}}</option>

所以只是不知道如何解释？

编辑：尝试使用v-for，我没有收到任何错误，但选择选项中没有任何内容

<select class="form-control" id="staff" name="staff">
    <option selected disabled>- Select -</option>
    <div v-for="aStaff in staff">
       <option :value="aStaff.id">aStaff.initials</option>
    </div>
 </select>

我在自定义组件中定义了员工：

<sale v-if="showModal" @sale="calcFees" :staff="{{$staff}}"></sale>

因此，当我简单地在组件页面中执行{{staff}}时，它会显示我希望看到的数据。

Sale.vue 组件定义：

<script>
  export default {
     data: function () {
       return {
       price: null
    }
   },
   props: {
    staff: {
        type: Array,
        required: true
    }
   },
   methods: {
      onSale(){
         this.$emit('sale', this.price) 
      }
   }
}
</script>

Answer 1

代码正在迭代div 。相反，请迭代该选项。

<option v-for="aStaff in staff" :value="aStaff.id">{{aStaff.initials}}</option>

当然，还要删除div。