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 我的模特

我的问题是我的输入显示＆＃34; [object Object]＆＃34;当我从我的建议清单中选择一个元素时。如果我把＆＃34;：value =＆＃34; value.name＆＃34;在我的输入中，我无法在输入中写入，值始终被重置（仅限最后输入的字符）

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

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)过多。

VueJS自动完成包含对象数组

1 个答案: