标签: vuejs3

我正在尝试使用 emailjs 通过 Vue.js 中的简单联系表单发送电子邮件。邮件发送后，我想更新页面，以便显示已发送的邮件而不是表单。我试图通过在发送的布尔值上使用 v-if 来做到这一点，在发送电子邮件时将其从 false 更改为 true。但我无法访问从 emailjssendEmail方法内部发送的变量。

这是联系页面的完整代码：

<template>
    <v-container justify-center class="contact-form">
      <v-form ref="form" v-model="valid" @submit.prevent="sendEmail" v-if="sent == false">
        <v-text-field v-model="name" :rules="namerules" label="Name" name="contact_name" required></v-text-field>
        <v-text-field v-model.number="phone" :rules="phonerules" label="Phone number" name="contact_number" required></v-text-field>
        <v-text-field v-model="email" :rules="emailrules" label="Email" name="contact_email" required></v-text-field>
        <v-textarea v-model="message" :rules="messagerules" label="Message" name="message" required></v-textarea>
        <v-btn :disabled="!valid" type="submit" value="Send" color="red" @click="sendEmail">Submit</v-btn>
      </v-form> 
      <v-layout justify-center v-if="sent == true">
        <h1>Your Mail Has Been Sent</h1>
      </v-layout>
      <v-layout justify-center v-if="error == true">
        <h2>There was an error sending Your Email. …

我刚刚检查了路由器视图（在 Vue 3 中）没有捕获从子级发送的事件。例如：

  <router-view
    @event-test="$emit('new-test-event')"
  />

在这里，我的孩子发送event-test但router-view从未捕获它，因此new-test-event从未发出。

我目前正在尝试使用 Vue3 在运行时渲染 HTML（不，v-html这不足以满足我的需求，因为我有一个需要在 HTML 中渲染的自定义组件）。我该怎么做呢？

我为 Vue 2 编写了一个“加载状态”mixin：

export default {
  props: {
    loading: {
      type: Boolean,
      default: false
    },
  },
  data () {
    return {
      innerLoading: false,
    }
  },
  mounted () {
    this.innerLoading = !!this.loading
  },
  methods: {
    startLoading () {
      this.$emit('update:loading', this.innerLoading = true)
    },
    stopLoading () {
      this.$emit('update:loading', this.innerLoading = false)
    },
  },
  computed: {
    isLoading () {
      return !!this.innerLoading
    },
    isNotLoading () {
      return !this.innerLoading
    },
  },
  watch: {
    loading (loading) {
      this.innerLoading = !!loading
    },
  }
}

我将此混合用于其他组件以保持loading …

我正在尝试使用 Typescript 设置 Vue3 项目。
我收到错误：“文件 '/home/.../src/App.vue.ts' 不是模块”。

在 中使用 Javascript 时main.js，它工作正常，但是当将其重命名为 时main.ts，我无法导入“.vue”文件。
主要.ts：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

createApp(App).use(router).mount('#app');

现在，运行时yarn serve，输出显示：

ERROR in src/main.ts:2:17
TS2306: File '/home/.../src/App.vue.ts' is not a module.
    1 | import { createApp } from 'vue';
  > 2 | import App from './App.vue';
      |                 ^^^^^^^^^^^
    3 | import router from './router';

让 Typescript 理解文件的方法是什么.vue？

我有一个简单的隐藏表格

<template>
  <form ref="form" method="POST" action="https://target.com/post" accept-charset="utf-8">
    <input type="hidden" name="data" :value="myData"/>
    <input type="hidden" name="signature" v-model="mySignature" />
    <input ref="submit" type="submit">
  </form>
</template>

并且我希望附加到不同按钮 ( v-on:click="submitForm") 的方法提交此表单设置数据。

export default {
  name: 'MyComponent',
  methods: {
    submitForm() {
      // should update values for inputs
      this.myData = 'dynamically calculated';
      this.mySignature = 'creates signature from data';
      // submit the form with values above
      this.$refs.form.submit();
    },
  },
  data() {
    return {
      myData: null,
      mySignature: null,
    }
  }
}

但似乎我误解了反应性/绑定/参考？在 Vue 中，所以我试过了

• this.$refs.submit.click();
• this.$forceUpdate();
• 设置 …

上周我在创建一个新项目并为其提供服务时没有任何问题，但是今天当我使用 vue/cli 创建一个新的默认项目时，我在服务时出现编译错误。

PS E:\Projects\testing> yarn serve
yarn run v1.22.5
$ vue-cli-service serve
 INFO  Starting development server...
98% after emitting CopyPlugin

 ERROR  Failed to compile with 1 error                                                                                                                                                                        ??12:22:33
 error  in ./node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js

Module parse failed: Unexpected token (763:13)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| }
| class RefImpl {
>     _rawValue;
|     _shallow;
|     _value;

 @ ./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js 1:0-233 2:0-216 2:0-216 2:0-216 2:0-216 2:0-216 …

我正在尝试让 ApexCharts 在我的 Vue 项目（我使用 Vue3）上运行，但我遇到了饼图/圆环图问题。如果我将模板标签下的类型更改为，下面的代码将起作用 "bar"

<template>
  <div>
    <apexchart v-if="loaded" width="500" type="pie" :options="chartOptions" :series="series"></apexchart>
  </div>
</template>

<script>
export default {
    data() {
      return {
        loaded:true,
        series: [{
            data:[23, 11, 54, 72, 12]
            }],
        chartOptions: {
            labels: ["Apple", "Mango", "Banana", "Papaya", "Orange"],
            dataLabels: {
                enabled: true
            },
            responsive: [{
                breakpoint: 480,
                options: {
                    chart: {
                        width: 200
                    },
                    legend: {
                        positon:'bottom',
                        show: false
                    }
                }
            }],
        }
      }
    }
};

</script>