小编Sim*_*mon的帖子

我正在创建一个非常简单的网站。我想根据navLayout页面模板中设置的数据更改导航栏元素。我想将数据传递给布局，然后使用props将其发送到NavBar. 我的问题是如何emit从页面到布局的数据。

布局/default.vue

<template>
  <div>
    <NavBar />
    <div class="site-container">
      <nuxt />
    </div>
    <Footer />
  </div>
</template>
<script>
import NavBar from '~/components/NavBar.vue'

export default {
  components: {
    NavBar,
  }
}
</script>

页面/index.vue

...
<script>
export default {

  data: () => {
    return {
      navLayout: 'simple'
    }
  },
  computed: () => {
    return {
    this.$emit('navLayout', value)
    }

  }
...
</script> 

我有三个输入jobApplyEmail, jobApplyPhone，jobApplyOther我正在使用 Vuelidate 对其进行验证。在这三种输入中，用户需要输入至少一种输入。为了实现这一目标，我正在使用它requiredUnless，但由于某种原因它不起作用。

模板重复

    // Using bootstrap-vue
    <b-form-input
      id="jobApplyEmail"
      v-model="form.jobApplyEmail"
      type="email"
      :class="{ 'is-invalid': $v.form.jobApplyEmail.$error }"
      @blur="$v.form.jobApplyEmail.$touch()">
    </b-form-input>

脚本

    import {
      required,
      email,
      requiredUnless
    } from 'vuelidate/lib/validators'
    data() {
        return {
          form: {
            jobApplyEmail: '',
            jobApplyPhone: '',
            jobApplyOther: ''
          },
        }
      },
    computed: {
        isOptional: () => {
          return (
            this.jobApplyEmail !== '' ||
            this.jobApplyOther !== '' ||
            this.jobApplyPhone !== ''
          )
        }
      },
    
    validations: {
        form: {
          jobApplyEmail: { required: requiredUnless('isOptional'), email …

我在 SPA 模式下使用 Nuxt v2.12.2，并希望在 default 中使用 env 变量head。我正在使用@nuxtjs/dotenv，但是当页面呈现时，它baseUrl是未定义的。

.env

BASE_URL=https://example.com

nuxt.config.js

require('dotenv').config()

export default {
  mode: 'spa',

  generate: {
    fallback: true
  },

  env: {
    baseUrl: process.env.BASE_URL || 'http://localhost:3000'
  },

  head: {
    meta: [
      {
        hid: 'og:image',
        name: 'og:image',
        content: process.env.baseUrl + '/og/facebook.png'
      }
    ],
  },

  modules: [
    '@nuxtjs/dotenv'
  ]

  ...
}