如何在 vue js 下拉列表中设置预选值

Question

我正在处理两个vue组件。使用 props parent组件array数据发送到child组件.现在我想child组件下拉列表中设置pre-selected值。

这是我的代码示例：

props:{
  // pre-selected value based on this.
  userdata:{
    type:[Array,Object],
    required:true,
  },
  roles:{
    type:[Array,Object],
    required:true,
  },
},
data(){
  return{
   mutableRoles:[],
  }
},

这是我的观点部分：

//i want set pre-selected value on this dropdownlist
<select multiple v-model="mutableRoles" class="form-control">
         <option v-for="(role,index) in roles" v-bind:value="role.id" >{{role.name}}</option>
       </select>

我见过很多仅使用字符串显示的示例。 但就我而言，两者都是数组。

Answer 1

试试这个：

const CurrentRole = Vue.component("current-role", {
  template: `
    <div>
      <label>Options</label>
      <select v-model="roleId" @change="changeValue">
        <option v-for="v in roles" :key="v.id" :value="v.id">{{v.title}}</option>
      </select>
    </div>
  `,
  props: {
    userdata: {
      type: [Array, Object],
      required: true,
    },
    roles: {
      type: [Array, Object],
      required: true,
    }
  },
  data: _ => ({
    roleId: null
  }),
  methods: {
    changeValue() {
      this.userdata.role = this.roles.find(e => e.id == this.roleId)
    },
  },
  mounted() { // for initial state
    this.roleId = this.userdata.role.id
  },
  watch: {
    userdata(v) { // for changes on parent
      if (v) this.roleId = v.role.id
    }
  }
})
new Vue({
  el: "#app",
  data: {
    rlist: [{
      id: 1,
      title: "a"
    }, {
      id: 2,
      title: "b"
    }, {
      id: 3,
      title: "c"
    }],
    user: {
      role: {
        id: 3,
        title: "c"
      }
    }
  },
  methods: {
    changeUser() {
      this.user = {
        role: {
          id: 1,
          title: "a"
        }
      }
    }
  }
})

<script src="https://unpkg.com/vue@2.5.22/dist/vue.js"></script>
<div id="app">
  <p>User: {{user}}</p>
  <current-role :userdata="user" :roles="rlist">
    </current-role/>
    <button @click="changeUser">change user</button>
</div>

选择是为基元值量身定制的，因此需要添加帮助程序函数。

更高级别的 vue 框架，如 vue-material、vuetify、element 和 muse-ui 倾向于提供组件来应对更高抽象级别的此类问题。

编辑：

我更改了片段以使其更接近您的情况。