小编Pat*_*han的帖子

我正在尝试在router-view标签内呈现我的 vue 组件。但它给了我一个错误

类型错误：路由未定义

但我没有route在任何地方使用这个词。这是我的代码。

应用程序

<template>
  <div id="app">
    <my-header></my-header>

    <router-view></router-view>

    <my-footer></my-footer>
  </div>
</template>

外部路由.js

import welcome from './components/welcome.vue';
import insideSystem from './components/insideSystem.vue';
import forgotPassword from './components/forgotPassword.vue';

export const routes = [
  {path:'',component:welcome},
  {path:'/insideSystem',component:insideSystem},
  {path:'/forgotPassword',component:forgotPassword}

];

主文件

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'

import {routes} from './outerroutes';
Vue.use(VueRouter);

const router = new VueRouter({
  routes,
  mode:'history'
});

new Vue({
  el: '#app',
  routes,
  render: h => h(App)
})

我想知道这是route从哪里来的。

在bootstrap官方文档中,我看到了很酷的导航丸.就是这个.

<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
  <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
  <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
  <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
  <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
</div>
<div class="tab-content" id="v-pills-tabContent">
  <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">...</div>
  <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
  <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
  <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
</div>

这是我目前用于导航的代码.

<ul class="nav flex-column">
          <li class="nav-item">
            <router-link to="/studentDashboard">Dashboard</router-link> …

<button class="btn" @click="removeFromTheCart(index,item.price)">
  Remove
</button>

我将两个参数传递给我的操作removeFromTheCart。

removeFromTheCart({ commit }, payload) {
  console.log("rooooooohhhhhoooow",payload)

当我在 vuex 存储中控制台记录我的有效负载时，它只输出 index。我的第二个参数不在输出中。

如何通过操作获取两个参数值？

我正在 React 项目上进行代码重构。它有这样的组件

import * as React from "react";

function SvgPage(props) {
  return (
    <svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
  </svg> );
}



export default SvgPage;

这些 SVG 文件渲染没有任何问题，但在控制台中，它给了我错误

警告：无效的 DOM 属性stroke-width。你的意思 strokeWidth？

如何消除这些控制台警告？我搜索谷歌并找到SVGR库。但我不确定如何使用它来解决问题。

任何帮助！

提前致谢！=)

在他们的（REST 客户端）文档中有这个

# @name login
POST {{baseUrl}}/api/login HTTP/1.1
Content-Type: application/x-www-form-urlencoded

name=foo&password=bar

###

@authToken = {{login.response.headers.X-AuthToken}}

# @name createComment
POST {{baseUrl}}/comments HTTP/1.1
Authorization: {{authToken}}
Content-Type: application/json

第一个请求是登录并将其保存authToken到变量中，并在其他请求中使用它。这里唯一的问题是这个authToken变量只能在同一个文件中访问。这些变量是文件的本地范围。

我确实想将其注入到$shared环境中，这样我也可以在其他文件中使用令牌。如何使用 REST 客户端插件执行此操作？

我有一个外部Java脚本文件 something.js

function myFun(){
  document.getElementById("demo").innerHTML="Hello World!";
  }

export default myFun;

这是我的Vue组件 Dashboard.vue

<template>
    <div>
        <button type="button" name="button" @click="">Call External JS</button>
        <div id="demo"></div>
    </div>
</template>

<script>
import something from "./something.js"
export default {

created(){
}
}
</script>

我有两个问题。

1. 首先，我如何在创建的生命周期挂钩中调用此方法以自动运行。
2. 其次，如何通过单击“调用外部JS”按钮来调用此方法

因为我知道更改div的内容很容易由vueJS完成，而无需纯JS外部文件的帮助。但是我在问这个问题，以阐明如何在vue组件中使用外部JS文件的概念。

谢谢。

我的要求是这样的。

1. 我必须输入字段以验证用户输入。
2. 当用户填写字段并单击“提交”按钮时，在转到提交之前，我要显示所有错误消息。
3. 如果用户数据中没有错误，则应提交

这是我的代码。

<template>
  <div>
      <h1>Add Items</h1>
      Product Name : 
      <input
      type="text"
      name="product"
      v-model="product"
      v-validate="'required|alpha_dash'"
      >
      <span style="color:red;">{{errors.first('product')}}</span>
      <br>
      Product Price : 
      <input 
      type="number" 
      name="price" 
      v-model="price"
      v-validate="'required|min_value:100|max_value:500'"
      >
    <span style="color:red;">{{errors.first('product')}}</span>
      <br>
      <button @click="submit">Save</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: "",
      product: ""
    };
  },
  methods: {
    submit() {
      alert("On submit");
    }
  }
};
</script>

现在它只显示第一个错误，{{errors.first('product')}}而不是这个。我想一次显示所有错误

和

这仅在您触摸输入字段时显示错误。无论您是否触摸这些字段，我都想显示所有验证错误，当您单击“提交”按钮时，我想显示所有错误。

我的用例是这样的，

1. 我循环遍历对象数组来填充下拉菜单。
2. 如果我对下拉列表进行 v-model，我只能获取对象 ID 或名称。但我可以同时获取 id 和 name。
3. 所以我需要计算属性来查找所选对象的 id。

这是我的 v-select

<v-select
    label="Select an item"
    :items="items"
    item-text="name"
    v-model="item_name">
/>

这是我的计算属性

computed: {
  id() {
    this.items.forEach(element => {
      if (element.name == this.item_name) {
        return (this.item = element.id);
      }
    });
  }  
}

我的计算属性出了什么问题，我希望 {{item}} 打印所选项目的 id，但事实并非如此。

嗨，我想在 JavaScript 中创建非常基本的脏话过滤器。

我有一个名为的数组badWords，也有一个名为description. 我不会检查其中是否包含任何坏词description。

这就是我到目前为止所做的。

const badWords = ["Donald Trump","Mr.Burns","Sathan"];

const description = "Mr.Burns entered to the hall."
let isInclude = false;
badWords.forEach(word=>{
  if(description.includes(word)){
  isInclude = true
  }
})

console.log(`Is include`,isInclude)

唯一的问题是我必须遍历badWords数组。有没有办法在不循环数组的情况下完成这项工作？

const sgMail = require('@sendgrid/mail');

const {
  keys,
} = require('../../config/config');

async function forgotPassword(req, res) {
  
  try {
    //...
    sgMail.setApiKey(keys.sendGridKey);
    const msg = {
      to: `${req.body.email}`,
      from: 'no-reply@example.com',
      subject: 'Forgot password request',
      text: 'You get this email because of you asked to reset password',
      html: `<strong>${token}</strong>`,
    };
    sgMail.send(msg);
   
    res.sendStatus(200);
  } catch (error) {
   
    res.status(500).json(error.message);
  }
}

我的 Nodejs 项目中有这个代码片段。哪个工作正常。但唯一的问题是这不能以异步方式工作。我尝试在官方文档中找到它，但在那里找不到。放入函数await中send，我需要做的就是使其作为异步函数工作。

await sgMail.send(msg);