时间戳

首页 > 解决方案 > 如何在Vue JS中的页面加载时默认单击列表项（li）

vue.js - 如何在Vue JS中的页面加载时默认单击列表项（li）

问题描述

在 Vue JS 中，如何使列表项（li）在页面加载时默认单击。我正在使用 li 元素迭代数字列表。单击“#”将返回所有记录，单击数字 1 将返回以 1 开头的记录，例如 100、101 等。在页面加载时，我必须默认选择“#”。如何在 Vue JS 中执行此操作?

Vue JS 版本：2.6.12

代码：

<template>
    <div>
        <ul class="numbersInput">
            <li v-for="number in numbers" :key="number"><a
                href="javascript:;" @click="numberStartsWith(number)">{{ number }}</a>
            </li>
        </ul>
        <div class="results">
            <!-- iterating logic for # to return all records-->
        </div>
    </div>
</template>

<script>
export default {
  name: 'SearchByNumber',
  data() {
    return {
      numbersList: ['100','101','102','103','104',
                    '200','201','202','203','204',
                    '300','301','302','303','304',],
        };    
   },
  computed: {
    numbers() {
      const nums = ['#', '1','2','3','4','5','6','7','8','9','10',];
      return nums;
    },
  },
  methods: {
      numberStartsWith(input) {
      if(input==='#'){
       // return numbersList
      }
    },
  },
};
</script>
<style>
.numbersInput {
    display:flex;
    text-decoration: none;
}
ul {
    list-style-type: none;
}
li > a {
    text-decoration: none;
}
</style>

标签： vue.jsvuejs2

解决方案

最简单的方法是在组件的mounted方法中添加一行：

export default {
  name: 'SearchByNumber',
  data () {
    ...  
  },
  computed: {
    ...
  },
  methods: {
    numberStartsWith(input) {
      ...
    }
  },
  mounted () {
    this.numberStartsWith('#')
  }
};

在加载 DOM 并渲染模板后，将调用方法中编写的任何代码mounted，这意味着现在是您通过调用所需的代码来“模拟”点击的正确时机。

要了解更多信息，您可以查看此链接：https ://vuejs.org/v2/guide/instance.html

推荐阅读