स्वत: पूर्ण - माउस क्लिक के साथ विकल्प का चयन करें - vuejs

वोट
0

पहले मैं कुछ समय के लिए एक परियोजना है, जिसमें मैं शामिल कर रहा हूँ के लिए Vue में एक स्वत: पूर्ण घटक बनाया।

लेकिन आज मैं एक छोटे से बग का पता चला।

जब मैं विकल्प मैं माउस के क्लिक के साथ चाहते हैं का चयन, विकल्प, प्रेषित नहीं प्राप्त करता है के रूप में आप में देख सकते हैं console.log ()उदाहरण में है। अगर मैं फिर से एक और विकल्प पर क्लिक करें, क्या में दिखाई देगा console.log ()पहले से चयनित विकल्प है।

अगर मैं एक डाल setTimeout( () => {}, 200)यह पहले से ही पता लगाता है और विकल्प फेंकना है, लेकिन मुझे लगता है कि इस मामले के लिए सबसे अच्छा समाधान नहीं है।

कोई उपाय?

उदाहरण

const Autocomplete = {
  name: autocomplete,
  template: #autocomplete,
  props: {
    items: {
      type: Array,
      required: false,
      default: () => Array(150).fill().map((_, i) => `Fruit ${i+1}`)
    },
    isAsync: {
      type: Boolean,
      required: false,
      default: false
    }
  },

  data() {
    return {
      isOpen: false,
      results: [],
      search: ,
      isLoading: false,
      arrowCounter: 0
    };
  },

  methods: {
    onChange() {
      console.log( this.search)
      // Let's warn the parent that a change was made
      this.$emit(input, this.search);
    },
    setResult(result, i) {
      this.arrowCounter = i;
      this.search = result;
      this.isOpen = false;
    },
    showAll() {
      this.isOpen = !this.isOpen;
			(this.isOpen) ? this.results = this.items : this.results = [];
    },
  },
  computed: {
      filterResults() {
      // first uncapitalize all the things
      this.results = this.items.filter(item => {
        return item.toLowerCase().indexOf(this.search.toLowerCase()) > -1;
      });
      
     
      return this.results;
    },
  },
  watch: {
    items: function(val, oldValue) {
      // actually compare them
      if (val.length !== oldValue.length) {
        this.results = val;
        this.isLoading = false;
      }
    }
  },
  mounted() {
    document.addEventListener(click, this.handleClickOutside);
  },
  destroyed() {
    document.removeEventListener(click, this.handleClickOutside);
  }
};

new Vue({
  el: #app,
  name: app,
  components: {
    autocomplete: Autocomplete
  }
});
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}

.autocomplete {
  position: relative;
  width: 130px;
}

.autocomplete-results {
  padding: 0;
  margin: 0;
  border: 1px solid #eeeeee;
  height: 120px;
  overflow: auto;
  width: 100%;
}

.autocomplete-result {
  list-style: none;
  text-align: left;
  padding: 4px 2px;
  cursor: pointer;
}

.autocomplete-result.is-active,
.autocomplete-result:hover {
  background-color: #4aae9b;
  color: white;
}
<script src=https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js></script>
<div id=app>
  <autocomplete />

</div>

<script type=text/x-template id=autocomplete>
  <div class=autocomplete>
    <input type=text @blur=onChange v-model=search  @click=showAll />
    <ul id=autocomplete-results v-show=isOpen ref=scrollContainer class=autocomplete-results>
      <li class=loading v-if=isLoading>
        Loading results...
      </li>
      <li ref=options v-else v-for=(result, i) in filterResults :key=i @click=setResult(result, i) class=autocomplete-result :class={ 'is-active': i === arrowCounter }>
        {{ result }}
      </li>
    </ul>

  </div>
</script>

14/02/2020 को 00:00
का स्रोत उपयोगकर्ता
अन्य भाषाओं में...                            


2 जवाब

वोट
1

आप onBlur घटना उपयोग कर रहे थे, लेकिन इतना मूल्य अपडेट नहीं किए जाने के लिए जब आप बाहर और onclick के मद श्रोता से पहले क्लिक करें, इसके निकाल दिया।

कब्जा आंकड़ों के onchange घटना का उपयोग करता है, तो इनपुट में उपयोगकर्ता प्रकार कुछ भी और कॉल onChange () विधि setResult अंदर ()।

const Autocomplete = {
  name: "autocomplete",
  template: "#autocomplete",
  props: {
    items: {
      type: Array,
      required: false,
      default: () => Array(150).fill().map((_, i) => `Fruit ${i+1}`)
    },
    isAsync: {
      type: Boolean,
      required: false,
      default: false
    }
  },

  data() {
    return {
      isOpen: false,
      results: [],
      search: "",
      isLoading: false,
      arrowCounter: 0
    };
  },

  methods: {
    onChange() {
      console.log( this.search)
      // Let's warn the parent that a change was made
      this.$emit("input", this.search);
    },
    setResult(result, i) {
      this.arrowCounter = i;
      this.search = result;
      this.isOpen = false;
      // Fire onChange, because it won't do it on blur
      this.onChange();
    },
    showAll() {
      this.isOpen = !this.isOpen;
			(this.isOpen) ? this.results = this.items : this.results = [];
    },
  },
  computed: {
      filterResults() {
      // first uncapitalize all the things
      this.results = this.items.filter(item => {
        return item.toLowerCase().indexOf(this.search.toLowerCase()) > -1;
      });
      
     
      return this.results;
    },
  },
  watch: {
    items: function(val, oldValue) {
      // actually compare them
      if (val.length !== oldValue.length) {
        this.results = val;
        this.isLoading = false;
      }
    }
  },
  mounted() {
    document.addEventListener("click", this.handleClickOutside);
  },
  destroyed() {
    document.removeEventListener("click", this.handleClickOutside);
  }
};

new Vue({
  el: "#app",
  name: "app",
  components: {
    autocomplete: Autocomplete
  }
});
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}

.autocomplete {
  position: relative;
  width: 130px;
}

.autocomplete-results {
  padding: 0;
  margin: 0;
  border: 1px solid #eeeeee;
  height: 120px;
  overflow: auto;
  width: 100%;
}

.autocomplete-result {
  list-style: none;
  text-align: left;
  padding: 4px 2px;
  cursor: pointer;
}

.autocomplete-result.is-active,
.autocomplete-result:hover {
  background-color: #4aae9b;
  color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app">
  <autocomplete />

</div>

<script type="text/x-template" id="autocomplete">
  <div class="autocomplete">
    <input type="text" @change="onChange" v-model="search"  @click="showAll" />
    <ul id="autocomplete-results" v-show="isOpen" ref="scrollContainer" class="autocomplete-results">
      <li class="loading" v-if="isLoading">
        Loading results...
      </li>
      <li ref="options" v-else v-for="(result, i) in filterResults" :key="i" @click="setResult(result, i)" class="autocomplete-result" :class="{ 'is-active': i === arrowCounter }">
        {{ result }}
      </li>
    </ul>

  </div>
</script>

14/02/2020 को 00:25
का स्रोत उपयोगकर्ता

वोट
1

blurयहाँ का उपयोग करने के गलत घटना है, और मुझे लगता है कि तुम पर यह उलझी रहे हैं। बस अपने फोन emitमें setResult:

setResult(result, i) {
      this.arrowCounter = i;
      this.search = result;
      this.isOpen = false;     
      this.$emit("input", this.search);
    },
14/02/2020 को 00:44
का स्रोत उपयोगकर्ता

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more