javascript - How do I improve my Vue.js code style and Javascript skills?

Question

I'm creating dynamic search for my page with Vue.js. I'm not very good with Javascript but I managed to get code below working :)

Is this style good and should I use more anonymous functions? Especially the filter() -function is very weird for me... parameters and returning anonymous functions kind of... Could someone check this code and give me some good learning resources how could I deeply understand this code and learn these things. I know if I would add anonymous function inside my filter return it would not work because of the variable scope.

But this works now :)

EDIT: Actually the v-if is not needed anymore because of the filtering methdod!

<div id="app" class="container">
    Search: <input type="text" v-model="filter_search"/>

    <div class="col-lg-8">
        <div v-for="dep in departments">
            <h2>{{dep}}</h2>

            <div v-for="person in filtered_persons(dep)">
                <template v-if="person.dep == dep">
                    <p>{{ person.fname }}</p>
                </template>
            </div>
        </div>
    </div>
</div>


var person_array = [
    {
        'fname': 'Jaakko',
        'lname': 'Möttönen',
        'title': 'Johtaja',
        'dep': 'Hallinto'
    },
    {
        'fname': 'Matti',
        'lname': 'Ääninen',
        'title': 'Projektipäällikkö',
        'dep': 'Projektijohto'
    },
];

var department_array = [
    'Hallinto',
    'Projektijohto'
];

new Vue({
    el: '#app',

    data: {
        filter_search: null,
        persons: person_array,
        departments: department_array
    },

    methods: {
        filtered_persons(dep) {
            if (this.filter_search) {
                return this.persons.filter(item => { 
                    return (
                        (item.fname.toLowerCase().indexOf(this.filter_search.toLowerCase()) > -1)
                        && (dep == item.dep)
                    );
                });
            } else {
                return this.persons.filter(item => {
                    return (
                        (dep == item.dep)
                    );
                });

            }
        }
    },
});

标签： javascriptvue.jsanonymous-function

Answer 1

For filtering computed properties are good. As soon as you change this.persons or this.filter_search the method filtered_persons will run

var person_array = [
  {
    fname: "Jaakko",
    lname: "Möttönen",
    title: "Johtaja",
    dep: "Hallinto"
  },
  {
    fname: "Matti",
    lname: "Ääninen",
    title: "Projektipäällikkö",
    dep: "Projektijohto"
  }
];

let deps = person_array.reduce((a, v) => {
  let i = a.findIndex(dep => dep.name == v.dep);
  if (i !== -1) {
    a[i].persons.push(v);
    return a;
  }
  a.push({ name: v.dep, persons: [v] });
  return a;
}, []);

new Vue({
  el: "#app",

  data: {
    filter_search: "",
    departments: deps
  },
  computed: {
    filtered_deps() {
      return this.departments.filter(dep =>
        dep.persons.some(person =>
          person.fname.toLowerCase().includes(this.filter_search.toLowerCase())
        )
      );
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app" class="container">
  Search: <input type="text" v-model="filter_search" />
  <div class="col-lg-8">
    <div v-for="dep in filtered_deps">
      <h2>{{ dep.name }}</h2>
      <div v-for="person in dep.persons">
        <p>{{ person.fname }}</p>
      </div>
    </div>
  </div>
</div>

As you can see i use an arrow function there without curly brackets {}

That means that the value / expression on the right side of the arrow => will be returnend and so i dont need to use return