我想按照教程添加 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) 我不知道如何在运行时访问 $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)
非常感谢
这是一个“ 更新 ”。在我的项目的先前版本中,我们没有适当的密码散列。因此,我想使用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”中重写所有登录内容?(对不起,这是一个基本问题)
我有一个搜索栏,每个字母的结果都会更新,但是例如,当用户快速键入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) 我有一个使用 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) 我想从数据库添加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 css 或 Add CSS style to v-html
我同时发现了 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)