Vue下拉列表显示对象对象

时间:2017-11-21 12:32:33

标签: javascript php html laravel vue.js

嗨我有一个下拉列表,选中它后必须获取合同并将其插入另一个下拉列表中。问题是我在下拉列表中的值下得到了对象对象。我只想要正常值。我该怎么做?另外,我在控制台中一直收到错误

  

“未捕获的TypeError:无法读取未定义的属性'name'”。

这是我的HTML:

<div class="form-group col-md-2 col-half-offset">
    <label for="value" class="control-label">Instruments:</label>
    <div>
        <select name="instruments" class="form-control select sel-primary" v-model="alert.instrument" v-on:change="autofillResult()" >
            <option v-for="instrument in instrumentData" v-bind:value="instrument">
                @{{ instrument.name }}
            </option>
        </select>
    </div>
</div>

<div class="form-group col-md-2 col-half-offset">
    <label for="contract" class="control-label">Expiry</label>
    <div>
        <select name="contracts" class="form-control select sel-primary" v-model="alert.contract" v-on:change="autofillResult()">
            <option v-for="contract in contractComputed" v-bind:value="contract" >
                @{{ contract.contractDate }}
            </option>
         </select>
     </div>
</div>

这是我的Vue:

el: "#alert",
data: {
    disabled:true,
    alert: {
        instrument:'',
        strike: '',
        contract: '',
        price:'',
        trigger: '',
    },
    formData: [],
    instrumentData:<?php echo $instruments;?>,
    latestprice:<?php echo $latestprice;?>,
    selectedContract:'',

 },
 computed: {
     contractComputed: function(){
        var instrumentContracts = [];
        if(this.alert.instrument.name != ''){
            instrumentContracts = _.chain(this.instrumentData).where({id: this.alert.instrument.id}).pluck('contracts').flatten().value();
        }

        return instrumentContracts;
      },
  },
  methods: {
      autofillResult: function(item){
          var price = _.chain(this.latestprice).where({'InstrumentName':this.alert.instrument.name, 'ContractDate': this.alert.contract.contractDate}).pluck('Last').first().value();
          this.alert.strike = "";
          this.alert.price = price;
          if(this.alert.contract.strikeInterval != undefined){
                var str  =  this.alert.contract.strikeInterval;
                this.alert.strike = (Math.round(price / str))*str;
                this.alert.price = price;
          }
      },

我的控制器:

public function index(){

    $instruments =  Instrument::with('contracts')->PriceAlerts()->get();

if ( date('D') == 'Sat' || date('D') == 'Sun' ) {
    $latestPrice = Contract::DeferredCalc()->get();

    $latestPrice = $latestPrice->map(function ($item, $key) {
        $data = (object)array();
        $data->InstrumentName = $item->instrument->name;
        $data->ContractDate = $item->contractDate;
        $data->Last = $item->latestClosePrice;
        return $data;
    });
}
else {
    $latestPrice = api_get_latestPrices()[0];
}

return view('entities.alert.index')->with(compact('instruments'))->with([
  'latestprice' => $latestPrice,
]);
}

0 个答案:

没有答案