小编Pat*_*han的帖子

我的要求是这样的。

1. 我从后端得到了图像列表。
2. 我想将这些图像名称传递给轮播以显示图像。

这是我的代码。

<template>
  <div class="">
    <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">

    <div class="carousel-item active" v-for="banner in banners">
      <img :src="`./assets/${banner}`" alt=""  class="img-fluid"   >

    </div>

  </div>
</div>
  </div>
</template>


<script>

export default {
  name: 'app',
  data () {
    return {
      banners:["logo.png","index.png","Capture.png"]
    }
  },
  methods:{

  }
}
</script>

但是这个方法行不通。如何将图像传递给我的轮播元素？

在我的vue.js项目中，几乎所有时候我都需要此代码段作为模板。

<template>
    <div>
    </div>
<template>

<script>

export default{
    data(){
    return{
    }
    },
    methods:{
    },
    created(){
    }
}
</script>

<style scoped>
</style>

我的问题是，每当我创建扩展名为.vue的文件时，它们是一种告诉VS代码的方法，请自动将该代码段添加到文件中。

我想要的只是当我创建具有特定扩展名的新文件时，该扩展名的预定义模板应自动添加到文件中。

我使用vue cli3来创建我的项目.

vue create my-project

然后我为我的项目添加了vuetify.

vue add vuetify

之后我从vuetify主题生成器创建了一个自定义主题.现在我想将该主题添加到我的项目中.

在vuetify的官方文档中添加主题是这样的

    Vue.use(Vuetify, {
  theme: {
    primary: '#3f51b5',
    secondary: '#b0bec5',
    accent: '#8c9eff',
    error: '#b71c1c'
  }
})

但我main.js看起来像这样

import '@babel/polyfill'
import Vue from 'vue'
import './plugins/vuetify'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')

在这里没有什么叫做Vuetify.那么如何在此项目设置中添加自定义主题？任何帮助.

提前致谢.

我有一个按钮，用户可以根据需要多次单击该按钮。但是，当用户单击按钮时，他可能会不小心单击两次，在这种情况下，代码应阻止第二次单击。

如果我进一步解释。两次单击之间的间隔应该很小。

如何使用vue js实现此目的？

在Vue docs 事件修饰符中， 我发现.stop

<button @click.stop="myFunction">Increase</button>

这能完成我想要的工作吗？

我发现改组算法似乎可以正常工作。

const questions = [
  { name: "Ananda or Nalanda" },
  { name: "Sunny or Rainy" },
  { name: "Facebook or Instagram" },
  { name: "IOS or Android" },
  { name: "Mc or KFC" }
];

questions.sort(() => Math.random() - 0.5)

questions.forEach(e=>{
    console.log(e.name)
})

但是我不认为这在语法中如何工作。我知道Math.random()会生成一个介于0和1之间的数字。sort是要排序的标准函数。但是，这两个函数如何使我的数组混乱？为什么要从中减去0.5 Math.random()？

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);

import React from "react";
import SingleEvent from "./SingleEvent";
interface Item {
  id: string;
  title: string;
  description: string;
  location: string;
  date: string;
  image: string;
  isFeatured: false;
}

export default function EventList({ items }) {
  return (
    <ul>
      {items.map((item: Item) => (
        <SingleEvent key={item.id} />
      ))}
    </ul>
  );
}

我有这个组件。在这里，我解构了 props 并获取了 items 数组。我确实想定义该数组的类型。

我试过这个

function EventList({ items :Item[]})

但这似乎不起作用，而且 items 道具也可以是空数组。

如何使用 TS 实现这一目标？

我想在vue组件中添加倒数计时器。我找到了用普通JavaScript编写的脚本。这是我的JavaScript文件。

var upgradeTime = 7200;
var seconds = upgradeTime;
function timer() {
   var days        = Math.floor(seconds/24/60/60);
   var hoursLeft   = Math.floor((seconds) - (days*86400));
   var hours       = Math.floor(hoursLeft/3600);
   var minutesLeft = Math.floor((hoursLeft) - (hours*3600));
   var minutes     = Math.floor(minutesLeft/60);
   var remainingSeconds = seconds % 60;
   if (remainingSeconds < 10) {
       remainingSeconds = "0" + remainingSeconds;
   }
   document.getElementById('countdown').innerHTML = hours + ":" + minutes + ":" + remainingSeconds;
   if (seconds == 0) {
       clearInterval(countdownTimer);
       document.getElementById('countdown').innerHTML = "Completed";
   } else {
       seconds--;
   }
}
var …

我在项目中使用VeeValidate插件进行验证。

这是我要验证的表格。

如果要验证保存按钮上的所有字段

this.$validator.validateAll().then(result => {
    if (result) {

    }
    // alert("Correct them errors!");
}

这种功能会有所帮助。

但是，如果我想在添加按钮上验证大学和课程，该怎么办？ 而不是全部验证，有没有一种方法可以只传递两个字段名称（uni和cou）进行验证？

我需要在下拉列表中显示世界上所有的国家。所以我找到了这个 api 端点END POINT LINK。当我将此端点链接复制并粘贴到我的 Web 浏览器中时，我收到了包含所有数据的响应。（国家）；

当我尝试将其嵌入到项目中时。

getCountries() {
      try {
       
        fetch(`https://restcountries.eu/rest/v1/all`).then(data =>
          console.log(data)
        );
        
      } catch (error) {
        console.log("HERE ERROR COMES", error);
      }
    }

它确实转到 fetch 方法的 then 块。但给了我输出

这里没有什么叫做数据。即使我得到了成功的回应。为什么会发生这种情况？这与cors错误有关吗？