标签: vuejs3

我有以下代码：

<image
    id="wheel-bg"
    class="wheel-bg"
    :x="-width/2"
    :y="-height/2"
    href="images/wheel-bg.png"
    :width="width"
    :height="height"
    filter="drop-shadow(black 0px 0px 1rem)"
    @click="spin"
></image>

我有一个数据属性“rotationState”，可以是“false”或“true”。

rotationState = false意味着 @click 事件应该触发并且

rotationState = true意味着 @click 事件不应触发

我试过

@click="spin && rotationState"

我也尝试过：

@click.stop="rotationState"
@click="spin"

和

:disabled="rotationState"

但上述方法不起作用，因为我认为我在<image></image>元素上有 @click 事件。

我想要实现的目标基本上是，

container.on('click', null);这是我第一次在jquery/js中编写代码时使用的代码。

Jquery Spin 函数代码

container.on("click", spin); //this code triggers spin in jquery

function spin(d) {

    container.on("click", null); //this code disables multiple spin from happening

    spinCount++;

    // First 2 spins
    if (spinCount < totalSpins) {

        //get …

“组件 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>

我在使用以下配置运行示例应用程序时遇到以下问题。

包.json

> "vue": "^3.0.0", 
> "vue-textarea-autosize": "^1.1.1", 
> "vuetify":"^3.0.0-alpha.0"

Main.js

import { createApp } from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'
import 'vuetify/dist/vuetify.css'
app.use(vuetify).use(VueTextareaAutosize)

低于警告且组件不可见。谁可以帮我这个事？

我已经传递了一个数组作为道具项，我在接口 Props 中给了它一个类型，当我尝试给它一个默认值时，我得到一个错误第四行我TS2322: Type 'never[]' is not assignable to type '(props: Readonly<Props>) => string[]'. \xc2\xa0\xc2\xa0Type 'never[]' provides no match for the signature '(props: Readonly<Props>): string[]'. 不确定我在这里做错了什么，因为这似乎适用于其他变量

<script setup lang="ts">\nimport {ref} from "vue";\n\ninterface Props {\n  items?: Array<string>\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  items: []\n});\nlet selectedItem = ref(props.items[0])\n

我将 Apex Charts 与 Vue 3 一起使用。当图表渲染（绘制）时，它会渲染两次。奇怪的是，当我调整大小或移动浏览器窗口时，第二个图表就会从 DOM 中删除。我还仔细检查了我的 Vue 组件，以确保我没有两次导入此图表组件。

<template>

<apexchart
  width="500"
  height="400"
  type="bar"
  :options="chartOptions"
  :series="series">
</apexchart>

</template>

<script>

import VueApexCharts from "vue3-apexcharts";

export default {
    name: 'ChartExample',
    components: {
        apexchart: VueApexCharts
    },
    data() {
        return {
            chartOptions: {
                chart: {
                    id: "vuechart-example",
                },
                xaxis: {
                    // categories loaded here
                },
            },
            series: [
                // data loaded here
            ],
        };
    },
    mounted() {
        this.series = [
            {
            name: 'precip',
            data: [1,2,3,4,5],
            }
        ];
        this.chartOptions.xaxis = {
            categories: [1,2,3,4,5], …

如何在Quasar中实现类似的功能，而不需要重新定义每个组件中的变量：

<template>
    <div>Welcome to {{ APP_NAME }}.</div>
</template>

我的应用程序是使用 Quasar CLI 设置的，它在设置过程中要求输入应用程序名称，因此我想它会作为全局变量或我可以访问的内容存储在某个位置。

如果做不到这一点，也许 Vue 3 有办法做到这一点。

我正在尝试使用 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 中添加vuex或vue-router作为插件并使用 options api 时，您可以使用关键字访问这些插件this。

main.js

import { createApp } from 'vue';
import i18n from '@/i18n';
import router from './router';
import store from './store';

app.use(i18n);
app.use(store);
app.use(router);

随机组件.vue

<script>
    export default {
        mounted() {
            this.$store.dispatch('roles/fetchPermissions');
        },
    }
</script>

组合 api 中不再提供该this关键字，这会导致大量重复代码。要使用store,vue-router或i18n库，我必须导入并定义以下内容：

具有组合 api 的 RandomComponent.vue

<script setup>
    import { useStore } from 'vuex';
    import { useRouter } from 'vue-router';
    import { useI18n } from 'vue-i18n'; …

我正在尝试循环遍历由字符串描述的组件列表（我从另一个 获取组件的名称，例如const componentTreeName = ["CompA", "CompA"].

我的代码很简单：

<script setup>
    import CompA from './CompA.vue'
    import { ref } from 'vue'

    // I do NOT want to use [CompA, CompA] because my inputs are strings
    const componentTreeName = ["CompA", "CompA"]
</script>

<template>
  <h1>Demo</h1>
  <template v-for="compName in componentTreeName">
    <component :is="compName"></component>
  </template>
</template>

演示在这里

编辑

我尝试过但没有取得多大成功。