标签: vue-script-setup
vue 3脚本设置onBeforeMount未定义
大家好，今天我通过脚本设置迁移到 vue 3。
我尝试使用 onBeforeMount 加载外部数据（异步等待）。
但收到错误：“onBeforeMount 未定义”
我查看文档并发现 onBeforeMount 应该可以工作！有什么问题吗？
<script setup>
import { ref } from '@vue/reactivity';
import axios from 'axios';
var data = ref(null);
onBeforeMount(async () => {
data.value = await axios.get("url");
})
</script>
推荐指数
解决办法
查看次数
是否可以将其变成 '<script setup>' ？我尝试了很多方法，但可能错过了一些东西
有可能把它变成<script setup>吗？我尝试了很多方法，但可能错过了一些东西。需要帮忙 ！
<script>
import ProductsAPI from '../api/products.api';
export default {
name: 'products',
components: {
product: 'product',
},
data() {
return {
products: [],
error: '',
};
},
async created() {
this.products = await ProductsAPI.fetchAll();
},
};
</script>
推荐指数
解决办法
查看次数
在 Vue 3 脚本设置 prop 定义中使用什么 TypeScript 类型来传递类？
我有一个使用脚本设置方法的 Vue 3 单文件组件。我想要定义的道具之一是接受该class属性的等效项。这意味着 prop 值可以是字符串、表达式、数组或对象。当我尝试withDefaults()为该道具分配默认的空字符串值时，问题就出现了。
withDefaults(
defineProps<{
itemClass?: unknown
}>(),
{
itemClass: '',
}
)
其绑定为
<div :class="itemClass">...</div>
我试图避免使用anyas 类型。我尝试过unknown，但当我尝试为其指定默认值时出现错误。临时解决方案似乎是简单地删除默认值，但在某些情况下我可能需要设置默认值。
Vue 属性有特定类型吗class？
推荐指数
解决办法
查看次数
如何使用 prop 控制子组件对父组件的可见性？
我正在尝试使用 prop 来控制子组件对父组件的可见性。
我的子组件有一个visible道具。为了避免改变visible道具，我将其分配给本地isVisible引用，并使用它来有条件地显示和隐藏表单。
但是，当我尝试使用按钮隐藏表单时，没有@click="isVisible = false"任何反应，并且出现控制台错误，提示Set operation on key "visible" failed: target is readonly.
为什么错误消息引用visibleprop 也令人困惑，因为我使用的是局部isVisible变量。
这是ChildForm.vue（子组件）：
<template>
<q-form v-if="isVisible">
<q-input v-model="modelValue" />
<q-btn label="Hide The Form" @click="isVisible = false" />
</q-form>
</template>
<script setup lang="ts">
import { ref, toRef } from 'vue';
const props = defineProps({
visible: {
type: Boolean,
required: true,
default: false,
},
});
const isVisible = toRef(props, 'visible');
const …vue.js quasar-framework vuejs3 vue-composition-api vue-script-setup
推荐指数
解决办法
查看次数
如何使用设置脚本、打字稿和组合 API 在 vue 中使用验证器
我有来自教程的以下代码示例，我尝试找出如何以与示例类似的方式使用验证器，使用脚本设置、打字稿和组合 API。
props: {
image: {
type: String,
default: require("@/assets/default-poster.png"),
validator: propValue => {
const hasImagesDir = propValue.indexOf("@/assets/") > -1;
const listOfAvailableExt = [".jpeg", ".jpg", ".png"];
const isValidExt = listOfAvailableExt.some(ext =>
propValue.endsWith(ext)
);
return hasImagesDir && isValidExt;
}
}
}
我知道如何声明类型和默认值，但我找不到使用验证器的方法。有没有什么函数可以验证不同的属性？
interface Props {
image: string
}
const props = withDefaults(defineProps<Props>(), {
image: require("@/assets/default-poster.png")
});
typescript vue.js vue-validator vue-composition-api vue-script-setup
推荐指数
解决办法
查看次数
如何定位 Vue 3 组件的 <script setup> 内的元素？
我怎样才能在这个 vue 组件中定位带有类的元素test：
<template>
<div id="test" class="test">
</div>
</template>
<script setup>
console.log(document.querySelector('.test'))
</script>
该组件被导入到另一个组件中。控制台输出null.
javascript vue.js vuejs3 vue-composition-api vue-script-setup
推荐指数
解决办法
查看次数
Vue3动态渲染
我有一个组件列表，我想从外部为它们设置一个配置，
例如：
const myConfig = [
{
name: 'example',
renderer: () => (<button @click="clickHanlder">Click me!</button>)
},
...
];
对于我的组件，我想使用myConfig如下所示：
<template>
<div class="example">
<template v-for="(item, index) in myConfig" :key="index">
My Button:
<div class="example-2">{{ item.renderer() }}</div>
</template>
</div>
</template>
请注意，我不想使用slots
我怎样才能做到呢？
vue.js vue-component vuejs3 vue-composition-api vue-script-setup
推荐指数
解决办法
查看次数
组合 API | Vue 路由参数未被监视
我在watch和vue router的文档中有几乎相同的示例用于组合 API。但console.log即使route.params.gameId在模板中正确显示，也永远不会被触发
<script setup>
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import { useStore } from 'vuex'
const store = useStore()
const route = useRoute()
watch(
() => route.params.gameId,
async newId => {
console.log("watch"+newId)
}
)
</script>
<template>
<div>
{{route.params.gameId}}
</div>
</template>
我究竟做错了什么？我还尝试使 watch 函数成为非异步的，但它没有改变任何东西，稍后我将需要它来获取 api，所以它应该是异步的。
vue.js vue-router vuejs3 vue-composition-api vue-script-setup
推荐指数
解决办法
查看次数
如何在独立（单文件）Vue3 SPA 中使用 Compose API？
我通过引导项目内容然后构建它以进行部署来编写（业余）Vue3 应用程序(*)。效果很好。
\n我需要创建一个可以直接在浏览器中加载的独立的单个 HTML 页面。几年前，当我开始使用 Vue 时（当时是在 v1 \xe2\x86\x92 v2 过渡期间），我曾经这样做过，当时我立即找到了正确的文档。
\n我找不到类似的 Vue3 和 Composition API。
\n显示值响应变量的框架页面是什么（我将在完整的构建应用程序的上下文中{{hello}}定义）<script setup>
这就是我过去的做法（我希望我做对了）
\n<!DOCTYPE html>\n<html lang="en">\n<head>\n <meta charset="UTF-8">\n <title>Title</title>\n <script src="https://unpkg.com/vue@2"></script>\n</head>\n<body>\n\n<div id="app">\n {{hello}}\n</div>\n\n<script>\n // this is how I used to do it in Vue2 if I remember correctly\n new Vue({\n el: \'#app\',\n data: {\n hello: "bonjour!"\n }\n // methods, watch, computed, mounted, ...\n })\n</script>\n\n</body>\n</html>\n\n
(*) 我实际上使用Quasar 框架，但这并没有改变我问题的核心。
\n推荐指数
解决办法
查看次数
为什么Vue3中的组件标签无法正常动态渲染组件？
我正在学习 Vue 并尝试使用组件标签学习动态渲染。这段代码有什么问题？控制台中没有显示任何错误，但单击按钮仍然不显示所需的组件。它确实可以与 v-if 一起使用，但我接下来的讲座的重点是使用组件动态渲染。哪个不起作用：
<template>
<div>
<the-header></the-header>
<button @click="setSelectedComponent('active-goals')">Active goals</button>
<button @click="setSelectedComponent('manage-goals')">Manage goals</button>
<component :is="selectedTab"></component>
</div>
</template>
<script setup>
/* eslint-disable no-unused-vars */
import { ref, defineExpose, defineComponent } from 'vue';
import TheHeader from './components/TheHeader.vue';
import ActiveGoals from './components/ActiveGoals.vue';
import ManageGoals from './components/ManageGoals.vue';
const selectedTab = ref('active-goals');
const setSelectedComponent = (tab) => {
selectedTab.value = tab;
};
defineExpose({
selectedTab,
setSelectedComponent,
});
defineComponent({
components: {
TheHeader,
ActiveGoals,
ManageGoals,
},
});
</script>
<style>
html {
font-family: sans-serif;
}
body {
margin: …javascript vue.js vuejs3 vue-composition-api vue-script-setup
推荐指数
解决办法
查看次数
标签 统计
vue-script-setup ×10
vue.js ×10
vuejs3 ×8
javascript ×2
typescript ×2
vue-router ×1
vue-sfc ×1