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。

在Vuejs中，如何将select选项绑定到object

1 个答案: