标签: vuejs3

我需要在 el-select 组件中自定义选定的值，到目前为止，我只找到了有关自定义选项项的文档和示例，但没有找到选定后的值。这可能吗element-plus？如果是这样，请添加一个示例或为我指出正确的方向。

这些是使用槽通过自定义 HTML 自定义的选项

这是选择后的样子，我需要使用自定义 html 按选项显示

我是 vue 初学者，想请教一个问题！\n我的英语不好，但我尝试完整地描述我的问题，谢谢。

目前我用来vue学习如何访问API，但我希望能够每3秒自动再次触摸API来更新屏幕，但我真的不\xe2\x80\x99不知道如何实现这一点？

希望得到您的帮助，再次感谢您观看我的问题。

我的例子

我正在尝试更改数据类型为'boolean'的变量。当页面首次加载时，数据运行良好。但是，当页面重新加载时，该变量会在方法中本地更新，而不是在全局数据部分中更新。因此，在控制台中，我不断收到错误“未捕获（承诺中）TypeError：无法读取 invokeDirectiveHook 处未定义的属性“值””

有什么我错过的吗？

<template>
  <p>Value: {{ val }}</p>
  <button @click="changeMe">Click Me</button>
</template>

<script>
import { ref } from 'vue';

export default {
  data() {
    return {
      val: ref(false);
    },
  },
  methods: {
    changeMe() {
      this.val = !this.val;
    }
  }
}
</script>

我有一个包含 SSR、Vue-Cli、Vuex 和 Typescript 的 Vue3 项目。

在路由器页面中，我需要将数据提交到 Vuex Store。在 .vue 文件中，我只需使用在 vuex.d.ts 中输入的 this.$store ，例如：

this.$store.commit("setFoo", "Bar")

但是我该如何从没有 this 或 vue 实例的 ts 文件 (router/index.ts) 中做到这一点。

我尝试导入商店索引文件并提交：

import store from "@/store/index"

store.commit("setFoo", "Bar")

但我收到一个错误

类型 '() => Store<{ foo: string; 上不存在属性 'commit' }>'.ts(2339)

商店文件（因为我正在运行 SSR，所以商店不能是单例）：

import Vuex from "vuex"

export default function () {
  return new Vuex.Store({
    state: () => ({
      foo: "foo",
    }),
    mutations: {
      setFoo(state, payload) {
        state.foo = payload
      },
    },
  })
}

更新了 vuex 4 …

我在寻找一种使用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 以便能够在模板中访问它？（我不想复制该值）

案例与问题

I\xc2\xb4m 在一个私人项目上工作，并且Vue.js出现以下错误，当 I\xc2\xb4m 尝试使用以下FileUpload组件时会发生此错误PrimeVue：

[Vue warn]: Property "$primevue" was accessed during render but is not defined on instance.\n

尝试使用FileUpload：

[Vue warn]: Property "$primevue" was accessed during render but is not defined on instance.\n

该错误仅在我尝试使用时发生FileUpload，如果删除它，该组件就会工作。FileUpload并按PrimeVue应有的方式进口main.js：

<template>\n  <FileUpload name="demo[]" url="" @upload="onUpload" :multiple="true" :maxFileSize="1000000">\n    <template #empty>\n      <p>Drag and drop files to here to upload.</p>\n    </template>\n  </FileUpload>\n</template>\n

到目前为止我尝试过的

我搜索了这个问题，但与此错误唯一完全匹配的是 …

假设我有两个组件，其中一个只是一个简单的输入：

<!-- Child.vue -->
<template>
    <input v-model="value" />
</template>

现在假设我有一个父元素，并且我想使用 v-model 绑定子输入的value.

伪代码：

<!-- Form.vue -->
<template>
    <Child v-model:value="parentVariable"/>
</template>

这样子组件的输入值就存在于子组件的状态之外。（或者它同时存在于两者中并且结合在一起。）

问题是如何将父组件中的变量双向数据绑定到子组件中的输入？

（我使用的是vue3）（如果有最佳实践，请告诉我。）

main.js

import Vuex from "vuex"
import Vue from 'vue'
import { createApp } from 'vue'
import App from './App.vue'
import store from "./store"
import drizzleVuePlugin from "@drizzle/vue-plugin"
import drizzleOptions from "./drizzleOptions"


const app = createApp(App)
app.use( Vue, Vuex, store,drizzleVuePlugin, { store, drizzleOptions })
app.mount('#app')

我正在使用 VueJS 3。我在我的终端中得到了这个：

“在‘​​vue’中找不到导出‘默认’（作为‘Vue’导入）

我该如何解决？

我在 Udemy 上观看 Vue 系列。他写了yarn add vue@3.0.7和yarn add vite@2.1.1 --developer。另外，我正在终端中编写 thoose 命令，但我看到 node_modules、package.json 文件 src 文件夹丢失。如何在src文件夹中动态创建？我不想下载和设置空项目。

我正在使用 Vue 3 和 TS 4.4。我有一个用 定义其 prop 类型的组件defineProps。当我添加对 的调用时defineEmits，VS Code 开始告诉我props组件模板中不存在我的变量。这是源代码：

<script setup lang="ts">
import { defineProps, defineEmits, VueElement, defineComponent } from "vue";

const emit = defineEmits<{
  "update:checked": boolean;
}>();

const props = defineProps<{
  label?: VueElement | string;
  checked?: boolean;
}>();
</script>

<template>
  <label>
    <input
      type="checkbox"
      :checked="props.checked"
      @change="(event) => emit('update:checked', (event.target as any)?.checked)"
    />
    {{ props.label }}
  </label>
</template>

还有一些屏幕截图，可以更好地展示我在 VS Code 中看到的内容。这是添加后的defineEmits：

这是没有defineEmits：

定义属性和发射类型的正确方法是什么？