小编JS_*_*e18的帖子

我正在尝试构建一个 Vuetify 表单，该表单允许输入日期格式，其中包括事件的开始和结束的日期和具体时间。到目前为止，我有以下内容：

            <v-form @submit.prevent="addEvent">
              <v-text-field v-model="eventName" type="text" label="event name (required)"></v-text-field>
              <v-text-field v-model="start" type="date" label="start (required)"></v-text-field>
              <v-text-field v-model="end" type="date" label="end (required)"></v-text-field>
              <v-btn type="submit" color="primary" class="mr-4" @click.stop="dialog = false">
                Add Event
              </v-btn>
            </v-form>

是否有一种输入类型允许在同一输入字段中同时输入日期和时间？如果是这样，我该如何实现这样一个字段？谢谢！

I am attempting to build a Pokemon filtered search app with Vue 3 and Composition API based on the following tutorial: https://www.youtube.com/watch?v=QJhqr7jqxVo. (GitHub: https://github.com/ErikCH/PokemonVue)

The fetch method used in the search component includes a reduce() function to handle urlIdLookup based on a specific id assigned to each Pokemon in the API response:

    const state = reactive({
      pokemons: [],
      filteredPokemon: computed(()=> updatePokemon()), 
      text: "",
      urlIdLookup: {}
      
    });

    fetch("https://pokeapi.co/api/v2/pokemon?offset=0")
      .then((res) => res.json())
      .then((data) => {
        console.log(data);
        state.pokemons = data.results;
        state.urlIdLookup …

我正在尝试将 Vue.js、Node、Express、MongoDB (MEVN) 堆栈应用程序部署到 Netlify。我成功地将应用程序的前端部署到 Netlify，现在正在尝试部署 express 服务器，基于以下serverless-http示例：https : //github.com/neverendingqs/netlify-express/blob/master/express/server。 js

我配置了我的服务器以包含该serverless-http软件包：

服务器.js

const express = require('express');
const app = express();
const serverless = require('serverless-http');
const bodyParser = require('body-parser');
const cors = require('cors');
const mongoose = require('mongoose');
const config = require('./DB.js');
const postRoute = require('./routes');

mongoose.connect(config.DB, { useNewUrlParser: true, useUnifiedTopology: true }).then(
  () => { console.log('Database is connected') },
  err => { console.log('Can not connect to the database'+ err)}
);

app.use(cors());
app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json());

app.use('/messages', …

我正在尝试在以下Vuetify日历上启用输入的事件：

https://github.com/vuetifyjs/vuetify/blob/master/packages/docs/src/examples/calendars/complex/events.vue。

我已设置日历以接受以表单提交的输入数据，包括名称，详细信息，开始，结束，颜色。当我提交表格时，出现错误提示

所有事件都必须将start和end属性设为有效时间戳，格式为YYYY-MM-DD。

我在开始和结束输入字段中使用type =“ date”，它在MM-DD-YYYY中呈现日期。我尝试改用Vuetify日期选择器，以使字段以YYYY-MM-DD格式呈现，但无济于事。如何重新配置​​此日历以改为接受MM-DD-YYYY格式的日期？

日历已修改：

增加了功能

      async addEvent () {
        this.start = await new Date(this.start).toISOString().substring(0,10)
        this.end =  await new Date(this.end).toISOString().substring(0,10)
        this.events.push({name: this.name})
        this.events.push({details: this.details})
        this.events.push({start: this.start})
        this.events.push({end: this.end})
        this.events.push({color: this.color})
      },

完整代码

<template>
  <v-row class="fill-height">
    <v-col>
      <v-sheet height="64">
        <v-toolbar flat color="white">
          <v-btn outlined class="mr-4" @click="setToday">
            Today
          </v-btn>
          <v-btn fab text small @click="prev">
            <v-icon small>mdi-chevron-left</v-icon>
          </v-btn>
          <v-btn fab text small @click="next">
            <v-icon small>mdi-chevron-right</v-icon>
          </v-btn>
          <v-btn
            color="primary"
            dark
            @click.stop="dialog = true"
          >
            New Event
          </v-btn>
          <v-toolbar-title>{{ title }}</v-toolbar-title> …

我正在尝试制作一个基本的 SwiftUI 列表，其中每个新列表项都显示在列表顶部。为此，我将 .reversed() 附加到传递到 ForEach 循环中的数组（由 表示）viewModel.itemList。我还设置了 .onDelete 来处理列表项的删除。但是，当我删除某个项目（例如列表中的最后一个项目）时，它会删除数组中的最后一个项目（列表顶部的项目）。如何配置 .onDelete 在数组反转时删除正确的项目？

请参阅下面的我的代码。谢谢！

内容视图

struct ContentView: View {
    
    @StateObject var viewModel = ToDoListViewModel()
    @State private var listItemName = ""
        
    var body: some View {
        NavigationView {
            VStack(alignment: .leading) {
                List {
                    ForEach(viewModel.itemList.reversed()) { item in
                        Text(item.listItem)
                    }.onDelete { index in
                        self.viewModel.itemList.remove(atOffsets: index)
                    }
                }
                
                HStack {
                    TextField("Enter List Item", text: $listItemName)

                    Button(action: {
                        viewModel.addToList(ToDoModel(listItem: listItemName))
                        listItemName = ""
                    }) {
                        Image(systemName: "plus")
                            .font(.largeTitle)
                            .frame(width: 75, height: 75)
                            .foregroundColor(Color.white) …

我正在尝试在 Vue.js 项目中设置响应式 Vuetify 应用程序栏。在移动屏幕上查看时，导航链接呈现在一个 3 点下拉菜单中。

<v-app>
    <v-app-bar color="indigo" dark fixed app>
      <v-toolbar-title>Toolbar Mobile Menu</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-toolbar-items class="hidden-sm-and-down">
        <v-btn text to="create">
          <span class="mr-2" v-if="activeUser">Create Post</span>
        </v-btn>
        <v-btn text to="/">
          <span class="mr-2" v-if="activeUser">All Posts</span>
        </v-btn>
      </v-toolbar-items>

      <v-menu class="hidden-md-and-up">
        <template v-slot:activator="{ on }">
          <v-btn icon v-on="on">
            <v-icon>mdi-dots-vertical</v-icon>
          </v-btn>
        </template>

        <v-list>
          <v-list-item v-if="activeUser" to="create">
            <v-list-item-title>Create Post</v-list-item-title>
          </v-list-item>
          <v-list-item v-if="activeUser" to="/">
            <v-list-item-title>All Posts</v-list-item-title>
          </v-list-item>
        </v-list>
      </v-menu>
    </v-app-bar>
    <v-content>
      <router-view></router-view>
    </v-content>
  </v-app>

问题是 3 点按钮在全屏和移动设备中都呈现。我当然希望该按钮仅在移动设备中可见。为了解决这个问题，我试图将按钮嵌套在v-toolbar-items标签内，但这也不起作用。关于如何配置此应用栏以仅在移动视图中显示 3 点按钮的任何建议？谢谢！

我正在尝试使用 Vue 3 Composition API 和 typescript 构建一个基本的待办事项列表应用程序。我之前为我的组件配置了设置函数，以使用一种ref方法来处理传递到listItems数组中的用户输入的反应性。现在，我尝试重构我的设置函数以使用一种reactive方法，并将我的待办事项应用程序的属性排列为对象。在我创建的状态对象中，我初始化newTodo为空字符串和listItems字符串数组。然后调用该addTodo函数将用户输入的 newTodo 值推送到 listItems 数组中。但是，通过此设置，我现在收到一个解析错误，指出需要标识符。此错误似乎针对状态对象中的 listItems 属性：listItems: <string[]>[]。我想假设这意味着需要将 id 添加到状态对象中才能附加到每个列表项，但我不确定如何动态处理这个问题。知道如何解决这个问题吗？参见下面的代码：

模板

<template>
  <div class="container">
      <form @submit.prevent="addTodo()">
          <label>New ToDo</label>
          <input
              v-model="state.newTodo"
              name="newTodo"
              autocomplete="off"
          >
          <button>Add ToDo</button>
      </form>

    <div class="content">
      <ul>
        <li v-for="listItem in state.listItems" :key="listItem">
          <h3>{{ listItem }}</h3>
        </li>
      </ul>
    </div>
  </div>
</template>

脚本

<script lang="ts">
import { defineComponent, reactive } from 'vue';

export default defineComponent({
  name: 'Form',
  
  setup() { …

我正在使用 Vue 3、Composition API 和 Pinia 构建 Pokemon 过滤搜索应用程序。我正在尝试设置应用程序，以便将从 Pokemon API 获取的响应传递到 fetchPokemon() 函数内的商店（使用 Pinia 设置）。

    const fetchPokemon = () => {
      axios.get("https://pokeapi.co/api/v2/pokemon?offset=0")
      .then((response) => {
        store.addPokemon(response.data.results)
      })
    }

将响应传递到商店后， updatePokemon() 函数使用 filter 和 include 方法过滤出商店中的 Pokemon 并将其与用户输入文本字段（“state.text”）中的 Pokemon 进行匹配：

    const updatePokemon = () => {
      if(!state.text) {
        return []
      }
      return store.getState.pokemons.filter((pokemon) => 
        pokemon.name.includes(state.text)
      )
    }

执行应用程序时，我在 updatePokemon() 函数中收到以下错误：

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'includes')

我假设这意味着用于搜索/过滤的 .includes() 方法不能用于此搜索。我应该如何处理过滤器并包含将商店中的神奇宝贝与用户输入的神奇宝贝进行匹配的方法？

这是代码：

皮尼亚店

import { defineStore } …

我正在尝试构建一个使用 Supabase 身份验证的 Vue 应用程序。在路由器文件中的一个路由防护中，我实现了一个supabase.auth.getUser()条件，以检索用户登录状态，该条件阻止next()在用户经过身份验证之前执行：

// Route guard for auth routes
router.beforeEach((to, from, next) => {
  // const user = supabase.auth.user();
  const { data: { user } } = await supabase.auth.getUser();

  if (to.matched.some((res) => res.meta.auth)) {
    if (user) {
      next();
      return;
    }
    next({ name: "Login" });
    return;
  }
  next();
});

但是，当我supabase.auth.getUser()在路由器防护内部实现时，我在登录之前在控制台中收到以下错误：“无效声明：缺少子声明”。登录后，错误消失。如果我从路由保护中删除supabase.auth.getUser条件，错误也会消失。经过一些额外的在线挖掘并在 jwt.io 中运行我的 Supabase 匿名密钥后，我的密钥似乎在有效负载中缺少子声明。如果这导致密钥无法正确验证，我该如何解决？

我正在尝试构建一个包含 Supabase 身份验证的 Vue.js 应用程序。我希望在注册时使用内置的 Supabase signUp() 方法来处理其他用户数据。为此，我向 SignUp 对象添加了一个属性，用于存储其他用户数据以及电子邮件和密码：

let { data, error } = await supabase.auth.signUp({
  email: 'someone@email.com',
  password: 'QQlbOIyZuwutISUzceOz',
  data: { isVendor: true }
})

但是，当我在创建用户后运行 console.log 时，我没有看到添加到用户对象中的其他数据属性。

user_metadata我还尝试将数据分配给用户对象中的现有属性，如下所示：

let { data, error } = await supabase.auth.signUp({
  email: 'someone@email.com',
  password: 'QQlbOIyZuwutISUzceOz',
  user_metadata: { isVendor: true }
})

然而，这也没有奏效。如何配置 signUp() 方法（或者可能是 Supabase 仪表板中的注册用户门户）来存储其他用户数据？

我正在尝试使用 Vuetify 网格系统在 v-for 循环中显示卡片项目。该循环被设置为遍历从 Vuex 存储文件（“item in this.$store.getters.getItems”）返回到模板的动态输入 Firestore 项目，然后将其呈现为 Vuetify 卡片。我成功地设置了循环以在容器内的小卡片中呈现项目。但是，我希望这些卡片在网格中呈现。换句话说，我想创建一个断点，以便在 3 张牌之后，例如，第 4、5 和 6 张牌下降到新的行。我怎样才能做到这一点？我了解如何在更简单的设置中执行此操作，而无需在 v-for 循环中使用 Vuex getter 方法。但是当 Vuex 方法开始进入图片时，这是如何工作的呢？我的代码如下：

主页.vue

<template>
 <div id="home">
   <v-container>
     <v-text-field v-model="myTodo" placeholder="add input"></v-text-field>
     <v-btn @click="addToDo">Add</v-btn>
   </v-container>

  <v-container>
    <v-flex md7>
      <v-card class="elevation-0 transparent card-container grey">
        <v-card-title primary-title class="layout justify-center">
          <div class="headline text-xs-center">CARD CONTAINER</div>
        </v-card-title>
        <v-flex d-flex>
          <v-card class="card-container" v-for="item in this.$store.getters.getItems" :key="item.id">
            {{ item.title }}<v-btn @click="deleteItem(item.id)">Delete</v-btn>
          </v-card>
        </v-flex>
      </v-card>
    </v-flex>
  </v-container>
 </div>
</template>

<script>
import { db } from …

我最近使用 Okta 身份验证构建了一个 Vue.js 应用程序。我正在尝试在 Netlify 上部署此应用程序。在 Netlify 中设置新项目后，我将 Vue.js 应用程序从 GitHub 导入到 Netlify 项目中。我在应用程序中重新配置了路由器，以便redirect_uri在 Okta 初始化程序中反映新的 Netlify URL：

import Auth from "@okta/okta-vue";

Vue.use(Auth, {
  issuer: "https://xxx-xxxxxx.okta.com/oauth2/default",
  client_id: "xxxxxxxxxxxxxxxxxxxx",
  redirect_uri: "https://xxxxxxxxx-xxxx-xxxxxx.netlify.com/implicit/callback",
  scope: "openid profile email"
});

部署应用程序并单击登录按钮后，我应该被重定向到默认的 Okta 登录页面。但是，我被重定向到一个页面，上面写着“找不到页面：看起来您访问了损坏的链接或输入了此网站上不存在的 URL。”

我什至确保在我的 Okta 仪表板中将该 URL 列入白名单。知道为什么 Netlify 无法识别新的 redirect_uri 吗？谢谢！