Question

这是我自己发布的此问题的后续问题： JavaScript progress bar does not work with oo js code

除了上述文章的解决方案之外，我还尝试使用箭头功能重新编写OO脚本，代码为：

<template>
    <!--Add b-modal tag and ref attribute here-->
    <b-modal id="myModal" class="" size="s" centered :hide-footer="true" :hide-header="true" ref="myModalRef">
    <div class="row justify-content-center">
        <h4 class="">Add new Participant</h4>
    </div>
    <div class="card">
        <input type="text" placeholder="Search ..." v-model="keywords" v-on:keyup="autoComplete"
               class="form-control bg-light border-0">
        <div class="panel-footer mt-2" v-if="results.length">
            <ul class="list-unstyled">
                <div class="result-item my-3">
                    <li class="media mx-2 my-3" v-for="result in results" :key="result.id" @mouseover="hover = true"
                        @mouseleave="hover = false"
                        :class="{ active: hover }">
                        <img :src="result.avatar_path ? result.avatar_path : '/img/dashboard/user-placeholder.png'"
                             class="rounded-circle align-self-center mr-3" width="40" height="40"/>
                        <h5 v-text="result.name" class="mt-3"></h5>
                        <div class="media-body d-flex justify-content-end mt-3">
                            <b-form-checkbox :id="'selected-user' + result.id" v-model="usersToAdd" :value="result" class="" />
                        </div>
                    </li>
                </div>
            </ul>
        </div>
    </div>

    <div class="col-3 my-5 mx-auto">
        <b-button type="submit" @click="sendInviteToUsers">Done</b-button>
    </div>

</b-modal>

</template>
<script>
import bForm from 'bootstrap-vue/es/components/form/form';
import bFormGroup from 'bootstrap-vue/es/components/form-group/form-group';
import bFormInput from 'bootstrap-vue/es/components/form-input/form-input';

export default {
    name: 'UserSearch',
    data() {
        return {
            keywords: '',
            results: [],
            hover: false,
            usersToAdd: [],
        };
    },

    methods: {
        autoComplete() {
            this.results = [];
            if(this.keywords.length > 2 ){
                this.$axios.get('/api/users/search', { params: { keywords: this.keywords } })
                .then(response => {
                    this.results = response.data;
                })
                .catch(() => {
                        this.loading = false;
                        this.showErrorToast('An error occurred while Fetching Users. Please try again later');
                });

                // .catch(error => {});
            }

        },

        sendInviteToUsers() {
            if(this.usersToAdd.length) {
                this.$axios.post('/api/teams/invite-with-email/', this.usersToAdd).then(response => {
                    //Do something you want
                    this.$refs.myModalRef.hide();
                }).catch(error => {
                    //Handle the errors
                    this.$refs.myModalRef.hide();
                })
            }

        }
    }
}
</script>
<style scoped>

</style>

document.getElementById("barButton").addEventListener("click", callMove);

function callMove() {
  var bar1 = new ProgressBar();
  bar1.move();
}

function ProgressBar() {
  this.elem = document.getElementById("myBar"),
    this.width = 1;
  this.move = () => {
    this.id = setInterval(this.frame, 10);
  };
  this.frame = () => {
    if (this.width >= 100) {
      clearInterval(this.id);
    } else {
      this.width++;
      this.elem.style.width = this.width + '%';
    }
  };
}

#myProgress {
  width: 100%;
  background-color: grey;
}

#myBar {
  width: 1%;
  height: 30px;
  background-color: black;
}

它无需使用.bind（）就可以工作（如原始文章中所述）。为什么？上一篇文章中的箭头功能案例与构造函数/原型案例有什么区别？

Answer 1

箭头函数没有它自己的this，它继承了this以及声明所在的函数。

JavaScript进度栏不适用于OO JS代码，但适用于箭头功能？

1 个答案: