如何提高我的 Vue.js 代码风格和 Javascript 技能？

Question

我正在使用 Vue.js 为我的页面创建动态搜索。我不太擅长 Javascript，但我设法让下面的代码正常工作 :)

这种风格好不好，要不要多用匿名函数？特别是 filter() -函数对我来说很奇怪......参数和 returning 匿名函数有点......有人可以检查这段代码并给我一些好的学习资源我怎么能深入理解这段代码和学习这些东西。我知道如果我在我的过滤器中添加匿名函数 return 它不会因为变量范围而起作用。

但这现在有效:)

编辑：实际上，由于过滤方法，不再需要 v-if！

<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)
                    );
                });

            }
        }
    },
});

Answer 1

用于过滤 computed 属性很好。一旦您更改 this.persons 或 this.filter_search 方法 filtered_persons 将运行

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>

如你所见，我在那里使用了一个没有大括号的箭头函数{}

这意味着箭头右侧的值/表达式 => 将返回，因此我不需要使用 return

如何提高我的 Vue.js 代码风格和 Javascript 技能？

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

javascript

anonymous-function

vue.js