Question

我认为这是一个错误！我无法在小提琴中复制这个问题。

我将数据从父组件传递到子组件，以便在select元素中选择默认选项。这个选择位于子组件中，由子组件本身填充，默认值应来自父组件。

因此，一旦所有呈现的内容都没有根据父值标记选择默认选项，同时也会删除父值。

App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <h1></h1>

    <h4>Example 1</h4>
    <user :account="account"></user>
  </div>
</template>

<script>
import user from './User.vue'

export default {
  name: 'app',

  components: {user},

  created() {
    this.getAccount();
  },

  data () {
    return {
      account: {
        id: '',
        name: ''
      }
    }
  },

  methods: {
    getAccount() {
      this.$http.get('account.json')
      .then((res) => {
        this.account.id = res.body.id
      })
    }
  }
}
</script>

User.vue

<template>
  <div>
    {{ account }}<br>
    <select v-model="account.id">
    <option value="">Choose</option>
    <option v-for="(user, index) in users" :value="user.id">{{ user.name }}</option>
  </select>

  </div>
</template>

<script>
export default {
  props: {
    account: {
      type: Object,
      required: true
    }
  },

  created() {
    this.getUsers();
  },

  data() {
    return {
      users: [],
    }
  },

  methods: {
    getUsers() {
      this.$http.get('https://jsonplaceholder.typicode.com/users')
      .then((res) => {
        this.users = res.body;
      })
    }
  }
}
</script>

我使用https://github.com/vuejs-templates/webpack创建了一个包，以便为您提供帮助。您可以下载包here

Vuejs搞砸了选择组件中的选定选项

0 个答案: