标签: vuejs3
Vue3 Reactive 值未按预期更新
我有这个 .ts 文件：
import { reactive, toRefs } from 'vue'
export const TitleComponent = () => {
const obj = reactive({
title: "This should be reactive"
})
const updateObj = () => {
obj.title = 'This is now different'
}
return {...toRefs(obj), updateObj }
}
然后我将 is 导入到一个显示它的 vue 组件中
<template>
<h1>{{ title }}</h1>
</template>
import { defineComponent } from 'vue'
import { TitleComponent } from 'some/place'
export default defineComponent({
const { title } = TitleComponent()
return { title } …2
推荐指数
推荐指数
1
解决办法
解决办法
439
查看次数
查看次数
Vue 不调用 onMounted 钩子
我有两个组件，一个是管理数据，另一个是vue模板。我在这里简化了它们。问题是，当位置通过 fetch 传入时，locationsvue 模板中的 保持为空。我已经检查过isRef()并返回 true，但它只是一个空数组。查看 Vue 开发工具面板，数组中locations 确实有元素。
地点.js
import {
ref,
isRef,
onMounted,
} from 'vue';
export default function useLocations () {
const locations = ref([]);
const loadImageData = (locId) => {
isRef(locations); // === true
// @FIXME locations.value is always empty here.
locations.value.forEach( (loc,key) => {
console.debug( loc.id, locId )
})
};
const getLocations = async () => {
const locs = await apiFetch({ path: '/wp/v2/tour-location'});
locations.value = locs;
};
onMounted( getLocations …2
推荐指数
推荐指数
1
解决办法
解决办法
8328
查看次数
查看次数
如何在 Vue Meta 3 中创建自定义元标签？
我用来Vue Meta 3向网站提供元数据。该 API 在这里
我不明白如何提供自定义元标记（例如 Open Graph 标记，例如og:type）。这是我在组件中尝试做的事情：
setup() {
useMeta({
title: "Homepage",
meta: [
{name: "hunky:dory", content: "website"}
],
description: "This is the homepage."
})
},
输出的 HTML 最终如下所示：
<head>
<title>Homepage</title>
<meta name="description" content="This is the homepage.">
<meta name="meta" content="website"> <!-- should be <meta name="hunky:dory content="website"> -->
</head>
如果我将代码更改为：
setup() {
useMeta({
title: "Homepage",
"hunky:dory": [
{content: "website"}
],
description: "This is the homepage."
})
},
我得到非法的 HTML 输出：
<head>
<title>Homepage</title>
<meta name="description" …2
推荐指数
推荐指数
1
解决办法
解决办法
1万
查看次数
查看次数
Vue.js 3 中的插槽继承
我试图了解如何/是否可以在 Vue.js v3 中定义某种插槽继承。我有一个Container定义 2 个插槽的类：title和items。我Container在我的班级中进行扩展，并在那里Grid定义了插槽。items当我去使用我的Grid课程时，我想定义插槽title。 小提琴供参考。
容器.vue
<template>
<div>
<header v-if="showTitle">
<slot name="title" />
</header>
<main v-if="showItems">
<slot name="items" />
</main>
</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
name: "MyContainer",
computed: {
showTitle() {
return !!this.$slots.title;
},
showItems() {
return !!this.$slots.items;
},
},
});
</script>
Grid.vue
<template>
<MyContainer>
<template #items>
<span>Here are my items</span>
</template>
</MyContainer> …2
推荐指数
推荐指数
1
解决办法
解决办法
2480
查看次数
查看次数
如何在 Vue3 v-for Array Refs 中传递索引
在文档中，它给出了代码：
<div v-for="item in list" :ref="setItemRef"></div>
export default {
setup() {
let itemRefs = []
const setItemRef = el => {
if (el) {
itemRefs.push(el)
}
}
onBeforeUpdate(() => {
itemRefs = []
})
onUpdated(() => {
console.log(itemRefs)
})
return {
setItemRef
}
}
}
但我也想将 v-for 索引传递给处理程序，就像这样：
// fake code
<div v-for="(item, index) in navItems" :key="index":ref="setNavItemRefs($el, index)">
<span>{{ item }}</span>
</div>
我该如何绑定这个index？
2
推荐指数
推荐指数
1
解决办法
解决办法
1892
查看次数
查看次数
Vue 3 - 如何在设置中调度到 Vuex 商店
我有一个使用 Vue 3 和 Vuex 的项目。这是我第一次使用 Vue 3。我似乎不知道如何在 Vue 3 项目的 Setup 方法中访问 Vuex。
我有一个特征对象。这是由子组件使用 featureSelected 方法设置的。首先，在我的设置中，我使用 useStore 创建一个存储常量；从 import { useStore } from "vuex";。然后，在 featureSelected 函数内，我调用此存储对象上的调度函数store.dispatch("setPlot", { geometry: newFeature });。
我不断收到错误消息，告诉我存储对象上不存在调度函数：Uncaught TypeError: store.dispatch is not a function。
setup() {
const store = useStore;
const feature = ref();
const featureSelected = (newFeature) => {
feature.value = newFeature;
store.dispatch("setPlot", { geometry: newFeature });
};
return { feature, featureSelected };
},
2
推荐指数
推荐指数
1
解决办法
解决办法
5476
查看次数
查看次数
响应式对象未在模板 Vue3 Composition API 上更新
我已经为此苦苦挣扎了几天，也许你可以帮助我。我正在尝试从 firebase 获取数据（保存state.state.memory并在我的模板上显示它。我的变量在控制台上保存了更新，但模板没有显示任何内容。我尝试了所有方法，但我无法在模板上获取任何内容，你可以吗？解释？
谢谢！！
模板
<template>
<div class="memory" id="memory">
Memory
<div class="elementos-memoria" v-for="item in saved" :key="item">
{{ item.primero + item.operador + item.segundo + ' = ' + item.resultado }}
</div>
<div class="elementos-memoria" v-for="cuenta in cuentas" :key="cuenta">
{{ cuenta }}
</div>
</div>
</template>
脚本
import M from "materialize-css";
import { inject, reactive, watch } from "vue";
export default {
props: {
cuentas: Array,
},
setup() {
const state = inject("store");
let saved = reactive({});
watch(
() => …2
推荐指数
推荐指数
1
解决办法
解决办法
4881
查看次数
查看次数
使用 <script setup> eslint 和 vetur 警告，即使我在模板中使用它们
我在 vue 3 中使用<script setup>，但我在我的方法上收到这些警告，因为我不再需要返回它们。
知道为什么它会给我这些警告吗？
2
推荐指数
推荐指数
1
解决办法
解决办法
892
查看次数
查看次数
Vue 3 数组状态更改不会触发观察者
我有一个表，每行都有一个复选框，还有一个头复选框，用于选择所有行，当任何复选框状态更改时，它应该触发一个事件，但由于某种原因，当我使用主复选框来检查它们时，观察者不会在我取消选中它之前不会被触发：
模板：
<table>
<thead>
<tr>
<th>
<input
type="checkbox"
class="form-check-input widget-9-check"
:name="name"
v-model="areAllItemsSelected"
/>
</th>
</tr>
</thead>
<tbody>
<tr v-for="..."> //here is rowIndex
<td>
<input
type="checkbox"
class="form-check-input widget-9-check"
:value="rowIndex"
v-model="selectedItems"
/>
</td>
</tr>
</tbody>
</table>
设置：
setup(props, {emit}) {
const selectedItems = ref([])
const areAllItemsSelected = ref(false)
watch(areAllItemsSelected, (newValue) => {
if(newValue) {
items.value.forEach((item, index) => {
selectedItems.value.push(index) //this should trigger the below watcher
})
} else {
selectedItems.value = []
}
})
watch(selectedItems, (newValue) => { //this doesn't run when …2
推荐指数
推荐指数
1
解决办法
解决办法
2775
查看次数
查看次数
在VUE 3中的Async方法中调用SweetAlert2
如果无法从服务器检索数据，我尝试弹出 sweetalert
我在 main.js 中导入了 Sweet Alert ：
import VueSweetalert2 from 'vue-sweetalert2'
import 'sweetalert2/dist/sweetalert2.min.css'
const app = createApp(App)
app.use(VueSweetalert2)
app.mount('#app')
在 Table.vue 组件内，我尝试调用 swal 但收到错误消息 (undefined $this.swal) ：
<script>
import axios from 'axios'
import { onMounted, ref } from 'vue'
export default {
setup() {
let transactions = ref([])
onMounted(() => {
getTransactions()
})
async function getTransactions() {
try {
let { data } = await axios.get('http://127.0.0.1:8000/api/transactions')
transactions.value = data.data
} catch(e) {
this.$swal('Something went wrong.')
}
}
return { …2
推荐指数
推荐指数
1
解决办法
解决办法
1万
查看次数
查看次数