我有两个组件，一个是管理数据，另一个是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 …在文档中，它给出了代码：
<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？
我有一个使用 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 };
},
我已经为此苦苦挣扎了几天，也许你可以帮助我。我正在尝试从 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(
() => …我在寻找一种使用Apollo v4和Vue 3组合 API将结果从方法内部返回到模板的干净方法时遇到一些问题。
这是我的组件：
export default {
components: {
AssetCreationForm,
MainLayout,
HeaderLinks,
LoadingButton,
DialogModal
},
setup() {
const showNewAssetModal = ref(false);
const onSubmitAsset = (asset) => {
// how do I access result outside the handler function
const { result } = useQuery(gql`
query getAssets {
assets {
id
name
symbol
slug
logo
}
}
`)
};
}
return {
showNewAssetModal,
onSubmitAsset,
}
},
}
onSubmitAsset当用户单击页面上的按钮时调用该函数。
如何result从设置函数返回 useQuery 以便能够在模板中访问它？（我不想复制该值）
我正在努力使用 Vue 3 Composition API。我试图按逻辑问题拆分我的代码，但我无法弄清楚如何传递要在可组合函数中监视的属性。
这是组件：
export default defineComponent({
props: {
collapseY: {
type: Boolean,
required: false,
default: false
},
barcodePulse: {
type: Boolean,
required: false,
default: false
}
},
setup(props) {
const pulse = ref(props.barcodePulse)
const {getRandomVerticalScaleValue, getRandomAnimationDuration} = usePulse(pulse)
return {
getRandomVerticalScaleValue,
getRandomAnimationDuration
}
}
})
这是usePulse可组合函数：
export interface usePulseData {
getRandomVerticalScaleValue: () => number;
getRandomAnimationDuration: () => number;
}
export const usePulse: (pulse: Ref<boolean>) => usePulseData = (pulse) => {
const stopBarcodeAniation = (event: Event) …“组件 A”中有一些反应性常量，可能会在某些用户操作后更新，如何将这些数据导入到另一个组件中？例如：
const MyComponent = {
import { computed, ref } from "vue";
setup() {
name: "Component A",
setup() {
const foo = ref(null);
const updateFoo = computed(() => foo.value = "bar");
return { foo }
}
}
}
'foo' 的更新值可以在另一个组件中使用而不使用提供/注入吗？
我对 Vue 生态系统还很陌生；如果这是我在这里遗漏的明显内容，我深表歉意。
有可能把它变成<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>
我正在尝试使用 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。
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