小编lna*_*mba的帖子

我正在VueJS中创建一个游戏,当页面加载时,我想要一个方法来激活,对外部API进行ajax调用并创建一堆数据属性.当玩家赢得回合时,我希望他们能够看到一个允许他们重新开始游戏的按钮.我mounted()在页面加载时使用钩子来触发方法.

我的问题是,如果游戏设置和API调用在mounted()函数内,我不确定如何实现重启功能.有没有办法mounted()再次运行该功能？

谢谢!

我试图在同一页面上做一个简单的滚动到一个锚元素.基本上,该人点击"试一试"按钮,它会滚动到页面下方的区域,其ID为"登录".现在,它正在使用一个基本的id="login",<a href="#login"></a>但它跳到那个部分.理想情况下,我希望它滚动到那里.如果我使用的是Angular4,是否有一些内置方法可以做到这一点或者最简单的方法是什么？谢谢!

整个模板......(组件仍然是空的)

<div id="image-header">
    <div id="intro">
        <h1 class="text-center">Welcome to ThinkPlan</h1>
        <h3 class="text-center">Planning your way</h3>
        <a class="btn btn-outline-primary" href="#login" id="view">Try It</a> <!-- Where the user clicks to scroll -->
    </div>
</div>
<div class="container" id="info">
    <div class="row">
        <div class="col-md-12">
             <div class="space" id="login"></div> <!-- The place to scroll to -->
                <h1 class="text-center">ThinkPlan</h1>
                <form  class="form-horizontal">
                    <fieldset>
                        <legend>Login</legend>
                        <div class="form-group">
                            <label for="inputEmail" class="col-lg-2 control-label">Email</label>
                            <div class="col-lg-10">
                                <input type="text" class="form-control" id="inputEmail" placeholder="Email">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputPassword" class="col-lg-2 control-label">Password</label>
                            <div …

我很难用Vue-Router传递道具.当我将它们带入下一个视图时,我似乎无法访问道具.这是我的方法对象:

methods: {
    submitForm() {
      let self = this;
      axios({
        method: 'post',
        url: url_here,
        data:{
          email: this.email,
          password: this.password
        },
        headers: {
          'Content-type': 'application/x-www-form-urlencoded; charset=utf-8'
        }
      }).then(function(response) {
        self.userInfo = response.data;
        self.$router.push({name: 'reading-comprehension', props: {GUID:self.userInfo.uniqueID }});
      })
   }
}

post请求正在运行,但当我尝试路由到一个新组件并传入一个props来访问下一个组件时,它说,

属性或方法"guid"未在实例上定义,但在呈现期间引用.确保在数据选项中声明反应数据属性.

顺便说一句,我路由到的组件看起来像这样:

<template lang="html">
  <div class="grid-container" id="read-comp">
    <div class="row">
      <h1>Make a sentence:</h1>
      {{ GUID }}
    </div>
  </div>
</template>

<script>
export default {
 data(){
   return {
     props: ['GUID'],
   }
 }
}

当我尝试在 Knex 和 Postgres 中运行种子时，我继续遇到同样的错误。错误是error: insert or update on table "locations" violates foreign key constraint "locations_user_id_fore ign"。谁能弄清楚为什么会抛出这个错误？我试过改变很多东西。谢谢！

用户迁移

exports.up = function(knex, Promise) {
  return knex.schema.createTable('users', function(table) {
    table.increments()
    table.string('email').notNullable();
    table.string('password').notNullable();
  })
};

exports.down = function(knex, Promise) {
  return knex.schema.dropTable('users')
};

位置表

exports.up = function(knex, Promise) {
  return knex.schema.createTable('locations', function(table) {
    table.increments('id');
    table.string('placename').notNullable();
    table.float('latitude').notNullable();
    table.float('longitude').notNullable();
    table.integer('user_id').notNullable().references('id').inTable('users').onDelete('cascade');
  })
};

exports.down = function(knex, Promise) {
  return knex.schema.dropTable('locations')
};

用户种子

exports.seed = function(knex, Promise) {
  // Deletes ALL existing entries
  return knex('users').del() …

之前我问过一个关于在 Vue 中删除自定义 truncate 过滤器的问题。请看这里的问题：

在鼠标悬停时删除 Vue 自定义过滤器

但是，我忽略了我正在使用 v-for 循环，当我将鼠标悬停在一个 div 上时，我注意到循环中的所有 div 都对它们应用了相同的操作。我不确定如何只定位悬停在上面的 div。这是我的模板：

 <div id="tiles">
    <button class="tile" v-for="(word, index) in shuffled" @click="clickWord(word, index)" :title="word.english">
      <div class="pinyin">{{ word.pinyin }}</div>
      <div class="eng" @mouseover="showAll = true" @mouseout="showAll = false">
        <div v-if="showAll">{{ word.english }}</div>
        <div v-else>{{ word.english | truncate }}</div>
      </div>
    </button>
  </div>

和返回的数据：

  data(){
    return {
      currentIndex: 0,
      roundClear: false,
      clickedWord: '',
      matchFirstTry: true,
      showAll: false,
    }
  },

如果您了解 Vue，我将不胜感激。谢谢！