VueJS自动完成包含对象数组

Question

我尝试修改我在github上找到的组件的自动完成组件，我有一个显示我的值的问题

这是我的Autocomplete.vue

 <template>
  <div style="position:relative" v-bind:class="{'open':openSuggestion}">
    <input class="form-control" type="text" :value="value" @input="updateValue($event.target.value)"
           @keydown.enter='enter'
           @keydown.down='down'
           @keydown.up='up'
    >
    <ul class="dropdown-menu" style="width:100%">
      <li v-for="(suggestion, index) in matches"
          v-bind:class="{'active': isActive(index)}"
          @click="suggestionClick(index)"
      >
        <a href="#">{{ suggestion.name }}
          <small>{{ suggestion.id}}</small>
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    props: {
      value: {
        //type: Object,
        required: true
      },
      suggestions: {
        type: Array,
        required: true
      }
    },
    data () {
      return {
        open: false,
        current: 0
      }
    },
    computed: {
      // Filtering the suggestion based on the input
      matches () {
        return this.suggestions.filter((obj) => {
          return obj.name.indexOf(this.value) >= 0
        })
      },
      openSuggestion () {
        return this.selection !== '' &&
          this.matches.length !== 0 &&
          this.open === true
      }
    },
    methods: {
      updateValue (value) {
        if (this.open === false) {
          this.open = true
          this.current = 0
        }
        this.$emit('input', value)
      },
      // When enter pressed on the input
      enter () {
        this.$emit('input', this.matches[this.current])
        this.open = false
      },
      // When up pressed while suggestions are open
      up () {
        if (this.current > 0) {
          this.current--
        }
      },
      // When up pressed while suggestions are open
      down () {
        if (this.current < this.matches.length - 1) {
          this.current++
        }
      },
      // For highlighting element
      isActive (index) {
        return index === this.current
      },
      // When one of the suggestion is clicked
      suggestionClick (index) {
        this.$emit('input', this.matches[index])
        this.open = false
      }
    }
  }
</script>

我使用我的组件：

 <autocomplete :suggestions="allBranchesEconomiquesActives" v-model="modifiedElementRegistre.personneMorale.brancheEconomique"></autocomplete>

allBranchesEconomiquesActives是一个对象数组：

[
{code:"A"
id:1
isActif:true
name:"Branche1"},
{code:"B"
id:2
isActif:true
name:"Branche2"},
....
]

和modifiedElementRegistre.personneMorale.brancheEconomique我的模型

当我从我的建议列表中选择一个元素时，我的问题是我的输入显示“[object Object]”。如果我在输入中输入“：value =”value.name“，我就无法在输入中写入，值总是被重置（只有最后输入的字符保留）

如何在模型中显示对象并在输入中正确显示？

Answer 1

你的输入显示[Object Object]，因为你给它整个Object，而String是预期的。为了能够编辑<input>的值，您可以复制value属性的名称，并将v-model与该副本一起使用。根据需要将复制值重置为初始值/新值。

<template>
  <div style="position:relative" v-bind:class="{'open':openSuggestion}">
    <input class="form-control" type="text"
           v-model="text"
           @input="updateValue($event.target.value)"
           @keydown.enter='enter'
           @keydown.down='down'
           @keydown.up='up'
           @blur='resetText'
    >
    <ul class="dropdown-menu" style="width:100%">
      <li v-for="(suggestion, index) in matches"
          v-bind:class="{'active': isActive(index)}"
          @click="suggestionClick(index)"
      >
        <a href="#">{{ suggestion.name }}
          <small>{{ suggestion.id}}</small>
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    props: {
      value: {
        type: Object,
        required: true
      },
      suggestions: {
        type: Array,
        required: true
      }
    },
    data () {
      return {
        text: "",
        open: false,
        current: 0
      }
    },
    computed: {
      // Filtering the suggestion based on the input
      matches () {
        return this.suggestions.filter((obj) => {
          return obj.name.indexOf(this.text) >= 0
        })
      },
      openSuggestion () {
        return this.selection !== '' &&
          this.matches.length !== 0 &&
          this.open === true
      }
    },
    methods: {
      updateValue (value) {
        if (this.open === false) {
          this.open = true
          this.current = 0
        }
      },
      // When enter pressed on the input
      enter () {
        this.$emit('input', this.matches[this.current])
        this.open = false
      },
      // When up pressed while suggestions are open
      up () {
        if (this.current > 0) {
          this.current--
        }
      },
      // When up pressed while suggestions are open
      down () {
        if (this.current < this.matches.length - 1) {
          this.current++
        }
      },
      // For highlighting element
      isActive (index) {
        return index === this.current
      },
      // When one of the suggestion is clicked
      suggestionClick (index) {
        this.$emit('input', this.matches[index])
        this.open = false
      },
      resetText() {
        this.text = this.value.name;
      },
    },
    mounted() {
      this.text = this.value.name;
    },
    watch: {
      value() {
        this.text = this.value.name;
      },
    },
  }
</script>

此外，似乎在打字时发出事件this.$emit('input', value)是多余的。