自定義 Vue 組件上的 v-model 不會更改輸入值

Question

我正在嘗試創建一個customCombobox組件，該組件的工作原理與普通的v-combobox類似，但用戶按下tab鍵后，它會自動將 select 設置為第一個選項（如果有的話）。

到目前為止我所做的看起來不錯，但這個領域v-model不起作用（它總是null ）。

<template>
  <v-combobox ref="combobox" :rules="rules"
              @keydown.tab.prevent="selectFirst"
              :value="innerValue" :label="label"
              :items="items"

  >

  </v-combobox>
</template>
<script>
module.exports = {
  props: ['value', 'label', 'items', 'rules'],
  data() {
    return {
      innerValue:null,
    }
  },
  watch:{
    value(_new){
       this.innerValue = _new
      this.$emit('input',[_new])
      this.$emit('change')
    }
  },
  methods: {
    selectFirst() {
      var combobox = this.$refs.combobox
      var filteredItems = combobox.filteredItems
      if (filteredItems.length){
          this.innerValue = filteredItems[0]
      }
    }
  },
  computed: {

  }
}
</script>

你知道為什么嗎？

Answer 1

您可以在自定義組件中使用計算的 setter 來處理來自父級的v-model並將其傳遞給它自己的子v-combobox ：

自定義組件：

<v-combobox v-model="selected" v-bind="$attrs"></v-combobox>

computed: {
  selected: {
    get() {
      return this.value;
    },
    set(val) {
      this.$emit('input', val);
    }
  }
}

使用v-bind="$attrs"還會傳遞來自父級的所有道具。 這是一個演示：

 Vue.component('comp', { props: ['value'], template: ` <v-combobox v-model="selected" v-bind="$attrs"></v-combobox> `, computed: { selected: { get() { return this.value; }, set(val) { this.$emit('input', val); } } } }) new Vue({ el: '#app', vuetify: new Vuetify(), data() { return { selected: 'Vue', label: 'This is my label', rules: ['These are my rules'], items: ['Programming', 'Design', 'Vue', 'Vuetify'] } } })

 #app { padding: 48px; }

 <div id="app"> <v-app id="inspire"> Selected in parent: {{ selected }} <comp v-model="selected":label="label":items="items"></comp> </v-app> </div> <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>