标签: vuejs2

我正在开发一个应用程序,我正在使用Vue 2javascript框架,在v-for循环中我需要将循环的计数器绑定到v-model元素的名称,这是我的代码:

<div v-for="n in total" class="form-group">
    <input type="hidden" id="input_id" :name="'input_name_id['  + n  + ']'" v-model="form.parent_id_n" />
</div>  

我需要n成为循环的计数器,例如它应该是第一个元素:

<div class="form-group">
    <input type="hidden" id="input_id" :name="'input_name_id[1]" v-model="form.parent_id_1" />
</div>

在name attribute结合的作品,但我不知道如何得到v-model工作呢？

我正在尝试将 Jest 引入我当前的项目。

然而，在初始设置过程中，我遇到了这个错误，并且无法正常运行。

我该如何解决这个问题？

我目前正在使用 vue-cli 中的 vue2。

\xe2\x97\x8f Test suite failed to run\n\n    TypeError: Cannot read properties of undefined (reading 'html')\n\n      at new JSDOMEnvironment (node_modules/jest-environment-jsdom/build/index.js:72:44)\n      at async TestScheduler.scheduleTests (node_modules/@jest/core/build/TestScheduler.js:317:13)\n      at async runJest (node_modules/@jest/core/build/runJest.js:407:19)\n      at async _run10000 (node_modules/@jest/core/build/cli/index.js:338:7)\n      at async runCLI (node_modules/@jest/core/build/cli/index.js:190:3)\n

这是我的测试代码。

import SettlementProcessing from "@/views/calculate/SettlementProcessing.vue";\nimport { shallowMount } from "@vue/test-utils";\nimport Vuetify from "vuetify";\ndescribe("Settlement Component", () => {\n  let vuetify;\n  beforeEach(() => {\n    vuetify = new Vuetify();\n  });\n  it("\xec\xa0\x95\xec\x82\xb0 \xec\xb2\x98\xeb\xa6\xac \xed\x83\x80\xec\x9d\xb4\xed\x8b\x80\xec\x9d\xb4 \xeb\x82\x98\xec\x99\x80\xec\x95\xbc …

在Vuex商店变异中,是否可以访问吸气剂？考虑下面的例子.

new Vuex.Store({
    state: {
        question: 'Is it possible to access getters within a Vuex mutation?'
    },
    mutations: {
        askQuestion(state) {
            // TODO: Get question from getter here
            let question = '';

            if (question) {
                // ...
            }
        }
    },
    getters: {
        getQuestion: (state) => {
            return state.question;
        }
    }
});

当然这个例子没有多大意义,因为我可以question直接在state变异中的对象上访问属性,但我希望你能看到我想要做的事情.也就是说,有条件地操纵状态.

在变异中,thisis undefined和state参数提供对state对象的访问,而不是存储的其余部分.

关于突变的文档没有提到任何关于这样做的事情.

我的猜测是,这是不可能的,除非我错过了什么？我想替代方法是在商店外执行此逻辑(导致代码重复)或实现执行此操作的操作,因为操作可以访问整个商店上下文.我很确定这是一种更好的方法,那就是让变异集中在它实际应该做的事情上; 改变国家.这可能就是我最终会做的事情,但我只是好奇如果甚至可能在突变中访问一个getter？

我的组件vue是这样的:

<template>
    <select class="form-control" v-model="selected" :required @change="changeLocation">
        <option :selected>Choose Province</option>
        <option v-for="option in options" v-bind:value="option.id" >{{ option.name }}</option>
    </select>
</template>

我用这个:<option :selected>Choose Province</option>选中

但是当执行时,在gulp watch上存在错误

像这样的错误:

错误在./~/vue-loader/lib/template-compiler.js?id=data-v-53777228!./~/vue-load er/lib/selector.js？type = template&index = 0!./ resources/assets/js/components/bootst rap/LocationBsSelect.vue模块构建失败:SyntaxError:意外的令牌(28:4)

似乎我的步骤是错误的

我该如何解决？

在我的index.js文件中,我theme用我公司的颜色手动覆盖了Vuetify 对象:

Vue.use(Vuetify, {
  theme: {
    primary: '#377ef9',
    secondary: '#1b3e70',
    accent: '#ff643d',
    error: '#ff643d'
    ...
  }

现在,我可以使用我的模板中的这些颜色,如下所示:

<my-text-field name="input text"
    label="text"
    value="text text text text..."
    type="text"
    color="primary">
</my-text-field>

我在我的模板样式中使用上面定义primary的theme对象中的任何其他变量:

<script>
  import { VTextField } from 'vuetify'
  export default {
    extends: VTextField
  }
</script>

<style scoped lang="stylus">
  label
    color: <seconday color> <-- this is what I'm after
    color: #1b3e70 <-- this works, but not quite good enough for me
</style>

我可以很容易地在样式部分中编写我的颜色的十六进制值,但我不想重复自己,而是宁愿使用我的theme对象,这样我也可以更容易地在各处轻松更改颜色,并避免拼写错误这会导致颜色定义出错.

我的项目根目录中有 .env 文件，在我的 nuxt 配置中，我使用变量来配置 ReCaptcha，如下所示：

import dotenv from 'dotenv'
dotenv.config()

export default {
    modules: [
        ['@nuxtjs/recaptcha', {
          siteKey: process.env.RECAPTCHA_SITE_KEY,
          version: 3,
          size: 'compact'
        }],
    ]
}

在 .env 中像这样：

RECAPTCHA_SITE_KEY=6L....

但应用程序总是失败并出现控制台日志错误：

ReCaptcha 错误：未提供密钥

当我像这样直接硬编码 ReCaptcha 密钥时：siteKey: 6L....应用程序开始工作，所以我猜问题在于读取 nuxt.config 中的 .env props

你知道如何解决它吗？

编辑：我尝试通过@kissu推荐和我在这里找到的示例更新我的nuxt.config： https: //www.npmjs.com/package/@nuxtjs/recaptcha

所以有新的 nuxt.config 也不起作用：

export default {
    modules: [
       '@nuxtjs/recaptcha',
    ],
    publicRuntimeConfig: {
       recaptcha: {
         siteKey: process.env.RECAPTCHA_SITE_KEY,
         version: 3,
         size: 'compact'
       }
  }
}

我正在尝试在 vue 中创建一个项目。但我在创建项目后遇到这个问题。

Parsing error: No Babel config file detected for C:\\HotelManagmet\clienthotel\babel.config.js. Either disable config file checking with requireConfigFile: false, or configure Babel so that it can find the config files. 我无法解决它，我尝试重新安装node.js和Visual Studio代码，但问题仍然存在。已尝试运行 npmauditfix --force 但不幸的是结果是相同的。有人知道它可能是什么吗？

码:

export default {
    props: {
        article: {type: Object}
    },
    data () {
        return {article: this.article}
    }, 
    methods: {
        itemClick () {
            console.log('itemClick');
        }
    }
};

Chrome开发人员工具中的Vue2.1.10警告:数据属性"article"已声明为prop.请改用prop默认值.

我正在使用vuejs 2 + axios.我需要发送一个get请求,将一些params传递给服务器,并获得一个PDF作为响应.服务器使用Laravel.

所以

axios.get(`order-results/${id}/export-pdf`, { params: { ... }})

成功请求,但它不会启动强制下载,即使服务器返回正确的标头.

我认为这是一种典型情况,例如,您需要形成PDF报告并将一些过滤器传递给服务器.那怎么可能实现呢？

更新

所以实际上我找到了解决方案.然而同样的方法不适用于axios,不知道为什么,这就是我使用原始XHR对象的原因.所以解决方案是创建一个blob对象和用户createUrlObject函数.示例示例:

let xhr = new XMLHttpRequest()
xhr.open('POST', Vue.config.baseUrl + `order-results/${id}/export-pdf`, true)
xhr.setRequestHeader("Authorization", 'Bearer ' + this.token())
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
xhr.responseType = 'arraybuffer'

xhr.onload = function(e) {
  if (this.status === 200) {
    let blob = new Blob([this.response], { type:"application/pdf" })
    let link = document.createElement('a')
    link.href = window.URL.createObjectURL(blob)
    link.download = 'Results.pdf'
    link.click()
  }
}

重要提示:您应该将数组缓冲区作为响应类型

但是,在axios中编写的相同代码返回的PDF为空:

axios.post(`order-results/${id}/export-pdf`, {
  data,
  responseType: 'arraybuffer'
}).then((response) => {
  console.log(response)

  let blob …

我有一个使用Vuetify数据表的简单数据表。其中一列是createdOn（日期时间），我想对其进行格式化。我该怎么做 ？

这就是我现在得到的：

<template>
   <v-layout>
      <v-data-table :headers="headers" :items="logs">
      </v-data-table>
   <v-layout>
</template>
<script>
      headers: [
        { text: "Time", value: "createdOn", dataType: "Date" },
        { text: "Event Source", value: "eventSourceName" },
        { text: "Event Details", value: "eventDetails" },
        { text: "User", value: "user" }
      ],
      items: [],
</script>