小编war*_*jai的帖子

我正在尝试研究vue2,并想知道是否有任何方法可以轻松跟踪元素在视口中是否可见,以便我们可以在向下滚动页面时执行滑入框等操作.任何npm包或任何可以建议的？谢谢.

不确定它是否只是我,我正在从bootstrap 3移动到v4并且下拉列表不起作用,即使是从bootstrap v4下拉会话中复制的最简单的示例.下面的代码显示了一个可点击的按钮,但没有下降任何按钮.我发现在刷新后的0.01秒,我点击按钮会出现下拉菜单.但是在它不起作用之后的任何时候.这是我的代码

JS

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>

CSS

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/css/tether-theme-arrows-dark.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">

HTML

<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

Vue 2,是否存在实际引用"完成渲染"的生命周期钩子？我想在进入页面时加载一个加载屏幕,它会逐渐消失并在Vue完成加载所有内容后显示页面内容,但我已经尝试了大部分生命周期钩子但没有工作.如果updated引用"完成渲染",我会尝试这样做:

updated(){
  this.loaded()
},
methods:{
  loaded(){
    var vm = this;
    this.loading = false;
  }
}

如果没有这样的生命周期钩子,你建议我做什么呢？谢谢

我不知道我的代码出错了.这应该是一个简单的过渡.当我单击按钮时,消息显示正确,但只是根本没有发生淡入淡出过渡.

<template>
    <div>
        <transition name="fade">
            <message v-show="showMessage" class="tr pop-up-message">
                <p slot="header">This is Header</p>
                <span slot="body">This is Body</span>
            </message>
        </transition>

        <div v-if="!showMessage" class="block" @click.prevent="showMessage = true">
            <a class="button is-primary">Primary</a>
        </div>
        <div v-else-if="showMessage" class="block" @click.prevent="showMessage = false">
            <a class="button is-primary">Primary</a>
        </div>
    </div>
</template>

<script>
    import message from './Message.vue'
    export default {
        components:{
            'message': message,
        }, 
        data(){
            return{
                showMessage: false
            }
        },
    }
</script>

我已经读过nextTick允许在下一个动作执行代码.但这在我的代码中不起作用,有人可以帮助我吗？请指正.谢谢.

.vue

.....
methods:{
      getUserInfo(){
        var vm = this
        vm.$http.get('/getAuthUser').then((response)=>{
          vm.user = response.data
        })
        Vue.nextTick(()=>{
          vm.$http.get('/getShop/'+vm.user.id).then((response)=>{
            vm.shop = response.data.data.shop
          })
        })
      },
}
.....

{{user.id}}确实有效.这给了我以下错误:

GET http:// localhost:8000/getShop/undefined 404(未找到)

编辑#1,如果我做这样的事情它有效,但这不应该是我认为正确的方法.

.....
methods:{
      getUserInfo(){
        var vm = this
        vm.$http.get('/getAuthUser').then((response)=>{
          vm.user = response.data
          vm.$http.get('/getShop/'+vm.user.id).then((response)=>{
            vm.shop = response.data.data.shop
          })
        })
      },
}
.....

编辑#2如果我做这样的事情它不会工作coz vm.user.id没有设置.

.....
methods:{
      getUserInfo(){
        var vm = this
        vm.$http.get('/getAuthUser').then((response)=>{
          vm.user = response.data
        })
        vm.$http.get('/getShop/'+vm.user.id).then((response)=>{
          vm.shop = response.data.data.shop
        })
      },
}
.....

我的同事成功执行了以下代码，显示了该表，而没有在本地环境中设置凭据，但是当我进行操作时，它在本地计算机上显示了此类错误。请帮忙。

请在下面找到我的代码：

控制器：

    AWS.config.update({
        region: 'localhost',
        endpoint: new AWS.Endpoint('http://localhost:8008'),
    })
    var params = {
        TableName: 'history',
        KeySchema: [{
            AttributeName: 'b_id',
            KeyType: 'HASH'
        },{
            AttributeName: 'e_id',
            KeyType: 'RANGE'
        }],
        AttributeDefinitions: [{
            AttributeName: 'b_id',
            AttributeType: 'S',
        },{
            AttributeName: 'e_id',
            AttributeType: 'N',
        }],
        ProvisionedThroughput: { // required provisioned throughput for the table
            ReadCapacityUnits: 1, 
            WriteCapacityUnits: 1, 
        },
    }
    response.implicitEnd = false
    AWS.query('history',params, function(err, data){
        if(err) console.log(err)
        else  response.json(data)
    })

错误信息：

{错误：连接EHOSTUNREACH 169.254.169.254:80-本地（）在Object._errnoException（util.js：1022：11）在_exceptionWithHostPort（util.js：1044：20）在internalConnect（net.js：971：16）在在process._tickDomainCallback（internal / process / next_tick.js：218：9）的_combinedTickCallback（internal / process / next_tick.js：131：7）上的net.js：1065：9消息：``配置中缺少凭据''，代码： 'CredentialsError'，errno：'EHOSTUNREACH'，syscall：'connect'，地址：'169.254.169.254'，端口：80，时间：2018-04-30T04：34：53.218Z，originalError：{消息：'无法加载来自任何提供者的凭据''，代码：``CredentialsError''，错误：``EHOSTUNREACH''，系统调用：``连接''，地址：``169.254.169.254''，端口：80，时间：2018-04-30T04：34：53.218Z，originalError ：{代码：'EHOSTUNREACH”，错误号：“ EHOSTUNREACH”，系统调用：“ …