时间戳

首页 > 解决方案 > Vue.js 在有条件的选项上设置选定的值不起作用

laravel - Vue.js 在有条件的选项上设置选定的值不起作用

问题描述

如果此 ID 与另一个对象匹配，我正在尝试为选择中的对象选项设置选定值。我有一个来自 API 的公司部门对象数组和一个有部门的公司，来自另一个 API 调用。这样，如果来自公司 API 调用的扇区 ID 字段与来自另一个 API 的扇区数组的 ID 匹配，则该项目应具有选择“检查”。出于某种原因，我正在做的方式不起作用。有人知道为什么吗？

这是我的代码：

<select v-model="company.descripion" name="role">
                        <option v-for="company_sector in this.company_sectors" :key="company_sector.id" :company_sector.id="company_sector" 
                        v-bind:select="company_sector.id == company.sector_id">
                            {{company_sector.name}}
                        </option>
                </select>

例如，这是来自 Company API 的一部分。没问题，返回的 Json 工作正常：

 "company": {
    "id": 8,
    "sector_id": 19,
    "sector": {
      "id": 19,
      "name": "Consultancy/ Services"
    },

这是来自company_sectors API的一部分，也很好用

[
  {
    "id": 19,
    "name": "Consulting"
  },
...then many other elements...
]

默认情况下，company_sectors 列表的第一个元素（如果显示为选中）而不是将咨询名称显示为列表中的选项。

任何想法。到底是怎么回事？

标签： laravelvue.js

解决方案

1）用于以编程方式选择选项v-model用于select元素。

2) 将value每个选项的属性设置为company_sector.id。因此，您将id在变量中获得选择的选项，v-model并且您将能够以编程方式选择选项id。

工作代码片段如下：

var vm = new Vue({
  el: '#app',
  data: {
    selected: null,
    company: {
      id: 8,
      sector_id: 19,
      sector: {
        id: 19,
        name: "Consultancy/ Services"
      }
    },
    company_sectors: [
      {
        id: 19,
        name: "Consulting 19"
      },
      {
        id: 20,
        name: "Consulting 20"
      }
    ]
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id='app'>
  <select v-model="selected" name="role">
    <option v-for="company_sector in company_sectors" :key="company_sector.id" :value="company_sector.id">
    {{company_sector.name}}
  </option>
 </select> 
 <button @click="selected = company.sector_id">Set value</button>
</div>

推荐阅读