Question

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

这是我的代码示例：

child

这是我的观点部分：

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

},

data(){
  return{
   mutableRoles:[],

  }
},

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

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-material，vuetify，element和muse-ui等更高级别的Vue框架往往提供具有更高抽象级别的组件来应对此类问题。

编辑：

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

如何在Vue JS下拉列表中设置预选值

1 个答案: