小编ger*_*ude的帖子

如何将 d3 与reactJS / nextJS 一起使用?

我想按照教程添加 d3 图表,但什么也没发生。我实际上不确定 useEffect() 是否处于良好的“时机”,我是否应该使用 componentDidMount,或者它是否不是添加元素的好方法......似乎我在这里遗漏了一些东西!

import React from 'react';
import * as d3 from "d3";
import { useEffect } from 'react';

function drawChart() {
  const data = [12, 5, 6, 6, 9, 10];
  const h = 100;
  const w = 100;
  const svg = d3.select("body")
    .append("svg")
    .attr("width", w)
    .attr("height", h)
    .style("margin-left", 100);
                  
    svg.selectAll("rect")
      .data(data)
      .enter()
      .append("rect")
      .attr("x", (d, i) => i * 70)
      .attr("y", (d, i) => h - 10 * d)
      .attr("width", 65)
      .attr("height", (d, i) => d …
Run Code Online (Sandbox Code Playgroud)

d3.js reactjs next.js

8
推荐指数
1
解决办法
1万
查看次数

vue-i18n 如何在刷新/访问 js(运行时)中的 $i18n.locale 后保留语言?

我不知道如何在运行时访问 $i18n.locale 。因此,我不知道如何将其保留在我的会话中,以便在刷新页面时它不会返回英文。

<select class="dropdown-menu-lang " aria-labelledby="dropdown07" v-model="$i18n.locale" @change="langChanged($i18n.locale)" >
          <option class="dropdown-item-lang" v-for="(lang, i) in langs" :key="`Lang${i}`" :value="lang">{{ lang }}</option>
</select>

langs: ['fr', 'en'],
Run Code Online (Sandbox Code Playgroud)

这是我尝试过的

mounted(){
     if(localStorage.Lang!=null) $i18n.locale=localStorage.Lang; //how to access $i18n.locale ??
 },

langChanged(lang){
      localStorage.Lang=lang; //this is OK
},
Run Code Online (Sandbox Code Playgroud)

这是我在 app.js 中定义所有内容的方式

import Vue from 'vue';
import Vuetify from 'vuetify';
import VueInternationalization from 'vue-i18n';
import Locale from './vue-i18n-locales.generated.js';

Vue.use(VueInternationalization);

const lang = document.documentElement.lang.substr(0, 2); 

const i18n = new VueInternationalization({
    locale: lang,
    messages: Locale
});
Run Code Online (Sandbox Code Playgroud)

非常感谢

internationalization vue.js

5
推荐指数
1
解决办法
3617
查看次数

新的密码散列-尝试登录时将用户重定向到密码重置

这是一个“ 更新 ”。在我的项目的先前版本中,我们没有适当的密码散列。因此,我想使用Laravel的哈希,并邀请用户输入新密码。

我的用户表中有一个新的密码列。如果用户尝试登录时,新密码不存在(空白列),我们将自动执行“重置密码”。我想知道在哪里进行验证:

class LoginController extends Controller
{
    public function login(Request $request)
    {
        //check if the user has an empty password
        //if yes
        redirect('/password/reset');

        //else
        //use normal login function
    }
}
Run Code Online (Sandbox Code Playgroud)

那是正确的地方吗?我是否需要在“ else”中重写所有登录内容?(对不起,这是一个基本问题)

authentication laravel

4
推荐指数
1
解决办法
123
查看次数

用axios搜索:当有新字符时取消先前的请求

我有一个搜索栏,每个字母的结果都会更新,但是例如,当用户快速键入3个字母时,先前的请求不会被取消,因此在获得结果之前会有一个很长的延迟。

我已经读过这个https://github.com/axios/axios#cancellation,也许我有点累了,但是在将其添加到我的项目中时我很难受。它几乎起到了相反的作用,现在需要永远。您有任何建议吗?或者您是否推荐一个好的教程,以便我能理解?

<input v-model="query" type="text" class="form-control" placeholder="Runner name or description"
                   aria-label="Runner name or description"
                   aria-describedby="basic-addon2">


watch: {
            query: {
                handler: _.debounce(function () {
                    this.newSearch()
                }, 100)
            }
        },
methods: {
            searchItems() {
                let filters = {
                    q: this.query
                };

                const CancelToken = axios.CancelToken;
                const source = CancelToken.source();

                axios.post('/Items/find', filters, {
                    cancelToken: source.token
                })
                .catch(function(thrown) {
                    if (axios.isCancel(thrown)) {
                        console.log('Request canceled', thrown.message);
                    }
                })
                .then(
                    response => {
                        if(this.Items!=null){
                            response.data.forEach(element => {
                                this.Items.push(element);
                            });
                        }
                        else
                            this.Items=response.data;
                    }
                ); …
Run Code Online (Sandbox Code Playgroud)

vue.js axios

3
推荐指数
2
解决办法
1692
查看次数

Laravel + Vue.js - 如何拥有一个全局变量?

我有一个使用 Laravel 和 Vue.js 的项目。我想不将它们分开并不是最好的主意,但我们从错误中吸取教训 ;) 以下是它的工作原理:

我一直在努力尝试放置全局变量,例如“当前用户”。现在,我每次需要时都会通过 axios 调用 /currentuser,或者我将它放在 props 中,但它让我发疯了......我怎样才能使它全局化?我想知道 Vuex 是否可以在我的项目中工作,因为一切都是从 Laravel 调用的,路由也是......

我在 app.js 中尝试了几件事(这里有 2 个,混合):

var curruser=null;

axios.get('/currmember').then(
    response => {
        curruser=response.data;
    }
);

Vue.mixin({
    methods: {

    },
    data: function() {
        return {
          myvaiable: '', //this doesn't work eather
          get currentUser() {
            if(curruser==null){
                axios.get('/currmember').then(
                    response => {
                        curruser=response.data;
                        return curruser;
                    }
                );
            }
            return curruser;
          }
        }
      }
});}
Run Code Online (Sandbox Code Playgroud)

在 TestComponent.vue 中

<template>
  <div>
    {{currentUser}}
    {{myvariable}} <!-- none of them display anything --> …
Run Code Online (Sandbox Code Playgroud)

laravel vue.js

2
推荐指数
1
解决办法
2250
查看次数

VueJS - 使用 v-html 添加 css 样式

我想从数据库添加html内容(以便可以从外部更改部分页面内容)。

如何添加SCSS样式?我像这样使用 v-html 但我不知道如何添加样式:

<div v-html="ct"></div>

async created() {
   this.ct = await this.getPage("blabla");
}
Run Code Online (Sandbox Code Playgroud)

我不想在 vuejs 样式中添加 SCSS 部分,并且我已经为代码的其他部分添加了一些其他 CSS,但如果需要,可以在这些资产中定义样式

<style lang="scss" scoped>
    @import '~assets/styles/core';
</style>
Run Code Online (Sandbox Code Playgroud)

我找到了一些答案,但样式似乎不是来自另一个源 Vue.js style v-html with scoped cssAdd CSS style to v-html

css sass vue.js

2
推荐指数
1
解决办法
2327
查看次数

Laravel 和 vuejs -&gt; 如何将控制器数据传递到我的 Vue 视图中?

我同时发现了 php、laravel、vuejs,我想有些事情我还没有好起来;)

我制作了一个新组件“tableau”,它是一个基本表格,并希望在我的应用程序的许多地方使用它,我只需要指定它的标题、列和数据。FootballerController 是我获取所有数据的地方。

这是现在的工作:

应用程序.js

const tableau = new Vue({
    components:{tableau:Tableau
   },
   data: function() {
        return  {
            title: "the best footballers",
            searchQuery: '',
            gridColumns: ['footballer', 'cote', 'nationalite'],
            gridData: [
                { footballer: 'Remond', cote: 951, nationalite:'USA' },
                { footballer: 'Marcel', cote: 935, nationalite:'ESP' },
                { footballer: 'Stian', cote: 923, nationalite:'NOR' },
                { footballer: 'Martin', cote: 923, nationalite:'USA' },
                { footballer: 'Pierre', cote: 918, nationalite:'ESP' },
            ]
        }
   }
}).$mount('#tableau');
Run Code Online (Sandbox Code Playgroud)

足球运动员.blade.php

<tableau
    v-bind:titre="title"
    :rows="gridData"
    :columns="gridColumns "
    :filter-key="searchQuery" >
  </tableau>
Run Code Online (Sandbox Code Playgroud)

表组件

<template> …
Run Code Online (Sandbox Code Playgroud)

laravel vue.js laravel-5.2 vuejs2

1
推荐指数
1
解决办法
5072
查看次数