草庐IT

关于 javascript：如何在页面加载时调用 vue.js 函数

codeneng 2023-03-28 原文

How to call a vue.js function on page load

我有一个帮助过滤数据的功能。当用户更改选择时，我正在使用 v-on:change 但我还需要在用户选择数据之前调用该函数。我以前使用 ng-init 对 AngularJS 做了同样的事情，但我知道 vue.js

中没有这样的指令

这是我的功能：

1
2
3
4
5
6
7
8
9
10
getUnits: function () {
        var input = {block: this.block, floor: this.floor, unit_type: this.unit_type, status: this.status};

        this.$http.post('/admin/units', input).then(function (response) {
            console.log(response.data);
            this.units = response.data;
        }, function (response) {
            console.log(response)
        });
    }

在 blade 文件中，我使用刀片表单来执行过滤器：

1
2
3
4
        {!! Form::select('floor', $floors,null, ['class'=>'form-control', 'placeholder'=>'All Floors', 'v-model'=>'floor', 'v-on:change'=>'getUnits()' ]) !!}
   
   
        {!! Form::select('unit_type', $unit_types,null, ['class'=>'form-control', 'placeholder'=>'All Unit Types', 'v-model'=>'unit_type', 'v-on:change'=>'getUnits()' ]) !!}

当我选择一个特定的项目时，这很好用。然后，如果我单击所有让我们说 all floors，它就可以工作。我需要的是当页面加载时，它调用 getUnits 方法，该方法将使用空输入执行 $http.post 。在后端，我以某种方式处理请求，如果输入为空，它将提供所有数据。

如何在 vuejs2 中做到这一点？

我的代码：http://jsfiddle.net/q83bnLrx

您可以在 Vue 组件的 beforeMount 部分调用此函数：如下所示：

1
2
3
4
5
6
7
8
 ....
 methods:{
     getUnits: function() {...}
 },
 beforeMount(){
    this.getUnits()
 },
 ......

工作小提琴：https://jsfiddle.net/q83bnLrx/1/

Vue 提供了不同的生命周期钩子：

我列出了几个：

  • beforeCreate：在实例刚刚初始化之后，在数据观察和事件/观察者设置之前同步调用。
  • created：实例创建后同步调用。在这个阶段，实例已经完成了对选项的处理，这意味着已经设置了以下内容：数据观察、计算属性、方法、监视/事件回调。但是，安装阶段尚未开始，$el 属性将不可用。
  • beforeMount：在挂载开始之前调用：即将第一次调用渲染函数。
  • 挂载：在实例刚刚挂载后调用，其中 el 被新创建的 vm.$el 替换。
  • beforeUpdate：在数据发生变化时调用，在重新渲染和修补虚拟 DOM 之前。
  • 更新：在数据更改导致虚拟 DOM 重新渲染和修补后调用。

    • 您可以在此处查看完整列表。

    您可以选择最适合您的钩子，并像上面提供的示例代码一样钩子来调用您的函数。

    • @PhillisPeters 您可以添加更多代码，或者创建一个小提琴。
    • @PhillisPeters 请查看更新的小提琴，我已将 http post call 替换为 setTimeout 进行模拟，现在您可以看到表格中填充的数据。
    • @GeorgeAbitbol 请随时相应地更新答案。
    • 我的问题是我不知道在mounted() 部分中使用"this"，并且出现函数未定义错误。上面使用了"这个"，我发现这是我的问题的解决方案，但答案中没有突出显示。 OP的问题与我的相似吗？添加一个标注来解决绑定问题会使这个答案更好吗？

    你需要做这样的事情(如果你想在页面加载时调用该方法)：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    new Vue({
        // ...
        methods:{
            getUnits: function() {...}
        },
        created: function(){
            this.getUnits()
        }
    });

    • 尝试 created 代替。
    • @PhillisPeters 您可以使用 created 或 beforeMount。

    你也可以使用 mounted

    来做到这一点

    https://vuejs.org/v2/guide/migration.html#ready-replaced

    1
    2
    3
    4
    5
    6
    7
    8
    ....
    methods:{
        getUnits: function() {...}
    },
    mounted: function(){
        this.$nextTick(this.getUnits)
    }
    ....

    请注意，当 mounted 事件在组件上触发时，并非所有 Vue 组件都被替换，因此 DOM 可能还不是最终的。

    要真正模拟 DOM onload 事件，即在 DOM 准备好但页面绘制之前触发，请在 mounted:

    内部使用 vm.$nextTick

    1
    2
    3
    4
    5
    mounted: function () {
      this.$nextTick(function () {
        // Will be executed when the DOM is ready
      })
    }

    如果你得到数组中的数据，你可以像下面这样。它对我有用

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
        <template>
        {{ id }}
        </template>
       

        import axios from"axios";

            export default {
                name: 'HelloWorld',
                data () {
                    return {
                        id:"",

                    }
                },
        mounted() {
                    axios({ method:"GET","url":"https://localhost:42/api/getdata" }).then(result => {
                        console.log(result.data[0].LoginId);
                        this.id = result.data[0].LoginId;
                    }, error => {
                        console.error(error);
                    });
                },

    时调何在spanclassnbspjavascriptvue.jsvuejs2

    有关关于 javascript：如何在页面加载时调用 vue.js 函数的更多相关文章

    1. ruby - 如何在 Ruby 中顺序创建 PI - 2

      出于纯粹的兴趣，我很好奇如何按顺序创建PI，而不是在过程结果之后生成数字，而是让数字在过程本身生成时显示。如果是这种情况，那么数字可以自行产生，我可以对以前看到的数字实现垃圾收集，从而创建一个无限系列。结果只是在Pi系列之后每秒生成一个数字。这是我通过互联网筛选的结果:这是流行的计算机友好算法，类机器算法:defarccot(x,unity)xpow=unity/xn=1sign=1sum=0loopdoterm=xpow/nbreakifterm==0sum+=sign*(xpow/n)xpow/=x*xn+=2sign=-signendsumenddefcalc_pi(digits

    2. ruby - 如何在 buildr 项目中使用 Ruby 代码？ - 2

      如何在buildr项目中使用Ruby？我在很多不同的项目中使用过Ruby、JRuby、Java和Clojure。我目前正在使用我的标准Ruby开发一个模拟应用程序，我想尝试使用Clojure后端(我确实喜欢功能代码)以及JRubygui和测试套件。我还可以看到在未来的不同项目中使用Scala作为后端。我想我要为我的项目尝试一下buildr(http://buildr.apache.org/)，但我注意到buildr似乎没有设置为在项目中使用JRuby代码本身!这看起来有点傻，因为该工具旨在统一通用的JVM语言并且是在ruby中构建的。除了将输出的jar包含在一个独特的、仅限ruby​​

    3. ruby - 什么是填充的 Base64 编码字符串以及如何在 ruby​​ 中生成它们？ - 2

      我正在使用的第三方API的文档状态:"[O]urAPIonlyacceptspaddedBase64encodedstrings."什么是“填充的Base64编码字符串”以及如何在Ruby中生成它们。下面的代码是我第一次尝试创建转换为Base64的JSON格式数据。xa=Base64.encode64(a.to_json) 最佳答案 他们说的padding其实就是Base64本身的一部分。它是末尾的“=”和“==”。Base64将3个字节的数据包编码为4个编码字符。所以如果你的输入数据有长度n和n%3=1=>"=="末尾用于填充n%

    4. ruby-on-rails - 如何在 ruby​​ 中使用两个参数异步运行 exe？ - 2

      exe应该在我打开页面时运行。异步进程需要运行。有什么方法可以在ruby​​中使用两个参数异步运行exe吗？我已经尝试过ruby​​命令-system()、exec()但它正在等待过程完成。我需要用参数启动exe，无需等待进程完成是否有任何ruby​​gems会支持我的问题？ 最佳答案 您可以使用Process.spawn和Process.wait2:pid=Process.spawn'your.exe','--option'#Later...pid,status=Process.wait2pid您的程序将作为解释器的子进程执行。除

    5. ruby - 如何在续集中重新加载表模式？ - 2

      鉴于我有以下迁移:Sequel.migrationdoupdoalter_table:usersdoadd_column:is_admin,:default=>falseend#SequelrunsaDESCRIBEtablestatement,whenthemodelisloaded.#Atthispoint,itdoesnotknowthatusershaveais_adminflag.#Soitfails.@user=User.find(:email=>"admin@fancy-startup.example")@user.is_admin=true@user.save!ende

    6. ruby - 如何在 Ruby 中拆分参数字符串 Bash 样式？ - 2

      我正在为一个项目制作一个简单的shell，我希望像在Bash中一样解析参数字符串。foobar"helloworld"fooz应该变成:["foo","bar","helloworld","fooz"]等等。到目前为止，我一直在使用CSV::parse_line，将列分隔符设置为""和.compact输出。问题是我现在必须选择是要支持单引号还是双引号。CSV不支持超过一个分隔符。Python有一个名为shlex的模块:>>>shlex.split("Test'helloworld'foo")['Test','helloworld','foo']>>>shlex.split('Test"

    7. ruby - 在没有 sass 引擎的情况下使用 sass 颜色函数 - 2

      我想在一个没有Sass引擎的类中使用Sass颜色函数。我已经在项目中使用了sassgem，所以我认为搭载会像以下一样简单:classRectangleincludeSass::Script::FunctionsdefcolorSass::Script::Color.new([0x82,0x39,0x06])enddefrender#hamlengineexecutedwithcontextofself#sothatwithintemlateicouldcall#%stop{offset:'0%',stop:{color:lighten(color)}}endend更新:参见上面的#re

    8. ruby - 如何在 Lion 上安装 Xcode 4.6，需要用 RVM 升级 ruby - 2

      我实际上是在尝试使用RVM在我的OSX10.7.5上更新ruby，并在输入以下命令后:rvminstallruby我得到了以下回复:Searchingforbinaryrubies,thismighttakesometime.Checkingrequirementsforosx.Installingrequirementsforosx.Updatingsystem.......Errorrunning'requirements_osx_brew_update_systemruby-2.0.0-p247',pleaseread/Users/username/.rvm/log/138121

    9. ruby-on-rails - 如何在 ruby​​ 交互式 shell 中有多行？ - 2

      这可能是个愚蠢的问题。但是，我是一个新手......你怎么能在交互式ruby​​shell中有多行代码？好像你只能有一条长线。按回车键运行代码。无论如何我可以在不运行代码的情况下跳到下一行吗？再次抱歉，如果这是一个愚蠢的问题。谢谢。 最佳答案 这是一个例子:2.1.2:053>a=1=>12.1.2:054>b=2=>22.1.2:055>a+b=>32.1.2:056>ifa>b#Thecode‘if..."startsthedefinitionoftheconditionalstatement.2.1.2:057?>puts"f

    10. ruby-on-rails - 如何在我的 Rails 应用程序 View 中打印 ruby​​ 变量的内容？ - 2

      我是一个Rails初学者，但我想从我的RailsView(html.haml文件)中查看Ruby变量的内容。我试图在ruby​​中打印出变量(认为它会在终端中出现)，但没有得到任何结果。有什么建议吗？我知道Rails调试器，但更喜欢使用inspect来打印我的变量。 最佳答案 您可以在View中使用puts方法将信息输出到服务器控制台。您应该能够在View中的任何位置使用Haml执行以下操作:-puts@my_variable.inspect 关于ruby-on-rails-如何在我的R

    随机推荐