我使用 larastarters 套件（https://github.com/LaravelDaily/Larastarters）作为业余项目来练习 Intertia、Vue 和 tailwindcss。如果用户单击以默认媒体首选项开始的按钮，我想设置暗模式。我使用 Vuex 从 localstorage 读取状态，一切似乎都正常，我可以成功地将类设置为 dark 到容器，但没有任何反应，而如果我绑定单个类，例如 bg-gray-800 ，则该类将被应用。我错过了一些东西，但我无法弄清楚。这是商店
import { createStore } from 'vuex'
import { getThemeFromLocalStorage, setThemeToLocalStorage } from '../utils/index.js'
// Create a new store instance.
export default createStore({
state() {
return {
darkTheme: getThemeFromLocalStorage(),
}
},
mutations: {
toggleTheme(state) {
state.darkTheme = !state.darkTheme;
setThemeToLocalStorage(state.darkTheme);
}
}
});
组件：
<template>
<button
class="rounded-md focus:outline-none focus:shadow-outline-purple"
@click="toggleTheme"
aria-label="Toggle color mode"
>
<template v-if="!dark">
<svg
class="w-5 h-5"
aria-hidden="true"
fill="currentColor"
viewBox="0 0 20 20"
> …我有一个使用组合 api 的 Vue3 应用程序，并且想要在setup函数内异步获取数据。
对我有用的方法：
与 Promise 一起工作
<template>
<div>{{ result }}</div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
export default defineComponent({
setup() {
const result = ref();
fetch("https://api.publicapis.org/entries")
.then((response: Response) => response.json())
.then((jsonResponse: any) => {
result.value = jsonResponse;
});
return { result };
},
});
</script>
使用onMounted钩子
<template>
<div>
{{ result }}
</div>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted } from "vue";
export default defineComponent({
setup() {
const …我正在尝试将 Vue Draggable Next 用于 Vue 3 示例页面。
我已按照repo中的指南进行操作。导入 Vue Draggable Next 组件失败后，我开始使用https://unpkg.com/vue-draggable-next@2.1.1/dist/vue-draggable-next.global.js而不是https://cdnjs .cloudflare.com/ajax/libs/Vue.Draggable/4.0.0/vuedraggable.umd.min.js。
我的 HTML 代码显示在这个 JSFiddle 中：
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/vue@3"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.14.0/Sortable.min.js"></script>
<script src="https://unpkg.com/vue-draggable-next@2.1.1/dist/vue-draggable-next.global.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in bbcourses" :key="item.id">
<div style="border: 1px #000 solid">{{ item.name }}</div>
</li>
</ul>
<ul>
<li
v-for="item in pcourses"
:key="item.id"
style="border: 1px #000 solid"
>
{{ item.name }}
</li>
</ul>
<draggable
:list="pcourses"
group="people"
@start="log"
@end="log"
itemKey="id"
@change="log"
>
<div
v-for="element …我正在尝试使用 Vue 3.2 中的动态组件开发选项卡，但组件没有显示。如果我更改<component :is=currentTab ></component>为<A/>，它就会出现，所以我认为<component></component>工作不正常，但我不知道为什么。如果您能给我一些建议，我将不胜感激。谢谢。
<template>
<div class="flex-column">
<div class="header" >
<div id="dynamic-component-demo" class="demo">
<button
v-for="tab in tabs"
v-bind:key="tab"
v-bind:class="['tab-button', { active: currentTab === tab }]"
v-on:click="currentTab = tab"
>
{{ tab }}
</button>
<component :is=currentTab ></component>
</div>
</div>
</div>
<template>
<script setup lang="ts">
import Shop from './A/A.vue';
import Knowledge from './B/B.vue';
import Community from './C/C.vue';
import router from '../../router';
const currentTab= ref('A');
const tabs = ['A', 'B', 'C']
</script>
这是仅调用一次 onclick 事件的正常 javascript 代码：
<button onclick="myFunction(); this.onclick=null;">This button works only once</button>
<button onclick="myFunction()">This button works always</button>
<script>
function myFunction() {
console.log("hello");
}
</script>
</body>
普通 javascript 的技巧是这样的：
<button onclick="myFunction(); this.onclick=null;">
但是，现在我想在 vue.js 中使用此功能，并且 vue.js 中的按钮如下所示：
<input
type="submit"
value="Start"
name="start_button"
@click="start"
/>
谁能建议我如何在 vuejs 中调用一次事件......
我正在使用 Laravel/Inertia/Vue3，我获取了用户对象，然后我想在其他函数中使用它，但它总是未定义。
\n<script setup>\n// imports...\n\nconst props = defineProps({\n // props...\n})\n\nconst user = computed(() => usePage().props.value.user);\n\nconst click = () => {\n alert(`${user.name} clicked`);\n}\n</script>\n如果我尝试访问userHTML v\xc3\xada 车把中的对象，它会按预期工作，但我无法在单击功能中使用它。当然，我可以const user在函数内部分配一个值usePage().props...，但这看起来很丑陋，必须有另一种方法。
当然，我对 Vue 还很陌生。
\n编辑 ＃＃＃＃＃
\n当我说它看起来很丑时，我指的是这个：
\n<script setup>\n// imports...\n\nconst props = defineProps({\n // props...\n})\n\nconst user = computed(() => usePage().props.value.user);\n\nconst click = () => {\n const user = usePage().props.value.user;\n alert(`${user.name} clicked`);\n}\n</script>\n一定有更好更正确的方法
\n如何在 Storybook 故事中使用 Vue 3 插件？
例如，我使用 FormKit 在组件中创建表单元素。
FormKit 在我的 main.ts 中进行了全局配置，如下所示：
import { plugin, defaultConfig } from '@formkit/vue'
const app = createApp(App)
app.use(plugin, defaultConfig)
但 Storybook 不使用这个文件...那么我该如何为 Storybook 做同样的事情呢？
我正在与Bootstrap5和合作Vue 3。我有多个buttons，每个都触发一个collapse。
我想要的是，如果我打开一个折叠，所有其他折叠都应该关闭。但现在每一个崩溃都会显示出来，而其他的则不会关闭。
我尝试过使用data-parent，data-bs-parent但这些都不起作用。
我怎样才能做到这一点？谢谢你！
<div class="row margin-top">
<div class="col">
<div class="d-grid gap-2">
<button type="button" class="btn color-success" style="height: 200px;" data-bs-toggle="collapse" data-bs-target="#collapse-b1" aria-expanded="false" aria-controls="collapse-b1" data-bs-parent="#myGroup">
Button 1
</button>
</div>
</div>
<div class="col">
<div class="d-grid gap-2">
<button type="button" class="btn color-primary" style="height: 200px;" data-bs-toggle="collapse" data-bs-target="#collapse-b2" aria-expanded="false" aria-controls="collapse-b2" data-bs-parent="#myGroup">
Button 2
</button>
</div>
</div>
</div>
<div>
<div class="collapse" id="collapse-b1">
<div class="mt-3">
Text 1
</div>
</div>
<div class="collapse" id="collapse-b2">
<div class="mt-3">
Text 2 …user@host:/var/www/abc/def/frontend# npm run serve
> frontend@0.1.0 serve /var/www/abc/def/frontend
> vue-cli-service serve
ERROR Invalid options in vue.config.js: "baseUrl" is not allowed
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! frontend@0.1.0 serve: `vue-cli-service serve`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the frontend@0.1.0 serve script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! …在 vue 文档中，我在“脚本设置”指南中看到“命名空间组件”，它写道：
您可以使用带点的组件标签（如 <Foo.Bar>）来引用嵌套在对象属性下的组件。当您从单个文件导入多个组件时，这非常有用：
<script setup>
import * as Form from './form-components'
</script>
<template>
<Form.Input>
<Form.Label>label</Form.Label>
</Form.Input>
</template>
我想知道在这个例子中表单组件会是什么样子，以及这样的组件的正确用例是什么，它是否与“槽”有关。
vuejs3 ×10
vue.js ×9
javascript ×4
bootstrap-5 ×1
components ×1
darkmode ×1
html ×1
inertiajs ×1
jquery ×1
laravel ×1
onclick ×1
storybook ×1
tailwind-css ×1
vue-suspense ×1
vuedraggable ×1