标签: vue-component

我正在尝试使用 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 和数组的新手。我想对 json 数组进行分页，并将其限制为每页仅 10 个项目。然而在我的<tr>身体中它显示了数组中的所有列表。我尝试了其他方法，但没有成功。谁能帮我找到对这个 json 数组进行分页并反映在我的表格中的最佳方法？谢谢。

这是代码：

https://codesandbox.io/s/exciting-kapitsa-8d46t?file=/src/App.vue:1415-2437

应用程序.vue

<template>
  <div id="app">
    <table class="table t3">
      <thead class="thead">
        <tr class="tr">
          <th class="td no" width="10%">
            <span class="has-text-orange">No</span>
          </th>
          <th class="td">
            <span class="has-text-orange">Name</span>
          </th>
        </tr>
      </thead>
      <tbody
        class="searchable tbody"
        style="max-height: 200px; min-height: 200px"
      >
        <tr class="tr" v-for="(p, index) in alphabets" :key="index">
          <td class="td no" width="10%">{{ ++index }}</td>
          <td class="td">{{ p.letter }}</td>
        </tr>
      </tbody>
    </table>
    <div class="column is-12">
      <nav
        class="pagination is-right"
        role="navigation"
        aria-label="pagination"
      >
        <ul class="pagination-list">
          <li>
            <a @click="prev"> …

我是 vuetify 的新手，据我所知，[目前]无法在用户关闭对话框时销毁对话框的主体。

有人对此有什么想法吗？对于表单，我们可以使字段值等于 null 或其他值，但其他组件呢？

我有一个“提交”按钮，目前已在 van-submit-bar 下设置为禁用。当用户从下拉选项中选择桌号时，我需要启用它。

\n

• 默认情况下，选择表是下拉列表中的第一个选项，因此这就是我禁用提交按钮的原因。

  \n
\n

• 一旦用户选择了表格，用户将能够选择“提交”按钮。我已经粘贴了下面的选项列表。

  \n
\n

这是提交按钮；

<van-submit-bar\n      :price="toPrice(basketTotalPrice)"\n      disabled\n      label="Total:"\n      currency="\xc2\xa3"\n      button-text="Submit"\n      :loading="isLoading"\n      @submit="onSubmit"\n    >\n

这是选择表下拉选项；

   <div v-bind:style="style"></div>\n    <van-dropdown-menu direction="up">\n    <van-dropdown-item v-model="value1" :options="option1" />\n    </van-dropdown-menu>\n\n\n\noption1: [\n            { text: 'Select Table', value: 0 },\n            { text: 'Table 1', value: 1 },\n            { text: 'Table 2', value: 2 },\n            { text: 'Table 3', value: 3 }, \n

看起来这应该是一件很容易做到的事情，但我遇到了一些麻烦。

谢谢

我正在按照本教程进行操作，由于某种原因，我收到“最大调用堆栈错误”

<template>
  <SearchInput></SearchInput>
</template>

<script>

import SearchInput from './components/SearchInput.vue'
export default {
  name: 'App',
  components:{
    SearchInput
  }

};
</script>

SearchInput.vue组件文件：

<template>
<SearchInput> 
    <input type="text">
</SearchInput>
</template>


<script>
export default {
    name: "SearchInput",
}
</script>

我尝试为 SearchInput 指定自己的名称“SearchInputView”：SearchInput 但它不起作用。我使用 es6 语法，这是一个 Vue 2 项目。我究竟做错了什么？

我有图像的文件输入

<v-file-input show-size v-model="img" @change="upload(img)" label="Image"></v-file-input>

我正在尝试读取它并将文件转换为 base64 字符串

    upload(img) {
        console.log('img', img)

        var file = img.files
        var reader = new FileReader()
        reader.onloadend = function () {
            console.log('RESULT', reader.result)
        }
        reader.readAsDataURL(file)

    },

我无法让我的结果运行...请帮助！

我有一个父组件和一个子组件。我想从父组件中调用子组件中的方法并等待响应。我怎样才能做到这一点？我需要在父方法中添加条件的响应。

<!-- MY CHILD COMPONENT -->
<my-child-component ref="childform" />

// parent method
methods: {
     callChildMethod() {
        this.$refs.childform.onSubmit()
        // if want to get the response and do something
        if (response) {
            //do something
        }
      },
}

//child method
methods: {
    onSubmit() {
      //do something
      return false
    },
}

在 vue 文档中，我在“脚本设置”指南中看到“命名空间组件”，它写道：

您可以使用带点的组件标签（如 <Foo.Bar>）来引用嵌套在对象属性下的组件。当您从单个文件导入多个组件时，这非常有用：

<script setup>
import * as Form from './form-components'
</script>

<template>
  <Form.Input>
    <Form.Label>label</Form.Label>
  </Form.Input>
</template>

我想知道在这个例子中表单组件会是什么样子，以及这样的组件的正确用例是什么，它是否与“槽”有关。

正如标题所述，我想尝试<br />在数据绑定中添加一个 html 元素，但我做不到，我很困惑如何正确做

假设我有这段文字I like to playing games，我想像<br />这样添加I like playing <br /> games，听起来很简单，对吧？但我无法在数据绑定中执行此操作。

这是我的代码：

<aqua-text
 class="text-position"
 :b-section-title="'I like to playing' + <br /> + 'games'"
 :description="
 'Game is fun after all'
 "
/>

看起来像这样<aqua-text>：

<template>
  <div>
    <h1>{{ bSectionTitle}}</h1>

    <h2 class="bold">
      {{ description}}
    </h2>
  </div>
</template>

<script>
export default {
  props: {
    bSectionTitle: {
      type: [String]
    },
    description: {
      type: [String]
    },
  }
};
</script>

有人可以帮我解决这个问题并解释我在这里错在哪里吗？

在 vue 中遇到这个错误

vue.esm.js?efeb:628 [Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'v4' 
of undefined"

found in

---> <AddTodo> at src/components/AddTodo.vue
   <App> at src/App.vue
     <Root>

我已经安装了 uuid，所以 v4 应该可以工作，但事实并非如此。

我输入 vue create“项目名称”，它正在安装软件包很长一段时间。

没有错误消息，它只是继续安装软件包