小编Mar*_*abe的帖子

如何正确关闭<img>标签?

<img src='stackoverflow.png'>
<img src='stackoverflow.png'></img>
<img src='stackoverflow.png' />
Run Code Online (Sandbox Code Playgroud)

哪一个是正确的?

html

113
推荐指数
3
解决办法
9万
查看次数

将vee-validate/HTML属性添加到插槽中的输入元素

在我的应用程序中,我有很多表单,大多数输入看起来都是这样的:

<div class="form-group">
    <label for="language">{{ $t('form.language')}}</label>
    <input type="text" class="form-control" id="language" name="form.language" v-model="language" v-validate.initial="'required'" :data-vv-as="$t('form.language')" />
    <span class="invalid-feedback">{{ errors.first('language') }}</span>
</div>
Run Code Online (Sandbox Code Playgroud)

这一遍又一遍地重复.唯一真正改变的是字段名称和输入类型.有时它是一个选择,有时它是一个更复杂的组件而不是简单的HTML组件.

我的想法是创建一些包装器组件.所以我不必复制所有这些,只需使用类似的东西:

<form-group name="language">
    <input type="text" v-model="form.language">
</form-group>
Run Code Online (Sandbox Code Playgroud)

我尝试以这种方式实现它,但它不起作用:

<template>
    <div class="form-group">
        <label :for="name">{{ $t('form.' + name)}}</label>
        <slot class="form-control"
              :id="name"
              :data-vv-name="name"
              v-validate.initial="'required'"
              :data-vv-as="$t('form.'+ name)">
        </slot>
        <span class="invalid-feedback">{{ errors.first(name) }}</span>
    </div>
</template>

<script>
    export default {
        props: ['name']
    }
</script>
Run Code Online (Sandbox Code Playgroud)

你有什么想法?问题是我无法轻松地将mixins和props传递给slotted元素/组件.

javascript vue.js vue-component vuejs2 vee-validate

8
推荐指数
1
解决办法
795
查看次数

如何在 Gatsby 中禁用内联 CSS?

我用gatsby-starter-ghost创建了一个网站。

我注意到默认情况下,CSS 作为内联样式放入每个 HTML 文件的头部:

<style>.every-thing-is-in-here {}</style>
Run Code Online (Sandbox Code Playgroud)

我想在自己的文件中提供 CSS,而不是在每个 HTML 文件旁边。

如何禁用此行为并<link>改为用于 CSS?

css gatsby

5
推荐指数
1
解决办法
1351
查看次数

在Vue单元测试中单击按钮后触发表单提交

有没有一种方法可以通过在Vue单元测试中单击“提交”按钮来实际触发表单的提交?

让我们看一下这个简单的组件:

<template>
    <form @submit.prevent="$emit('submitEventTriggered')">
        <button type="submit">Submit Form</button>
    </form>
</template>

<script>
    export default {}
</script>
Run Code Online (Sandbox Code Playgroud)

您可以在此处找到类似的组件作为示例。

我想测试submit.prevent单击按钮并因此submitEventTriggered发出时触发的事件。当我在浏览器中运行此程序时,一切正常。但是以下测试失败:

import {shallowMount} from '@vue/test-utils'
import {assert} from 'chai'
import Form from '@/components/Form.vue'

describe.only('Form', () => {

    it('button click triggers submit event', () => {
        const wrapper = shallowMount(Form)

        wrapper.find('[type=\'submit\']').trigger('click')

        assert.exists(wrapper.emitted('submitEventTriggered'), 'Form submit not triggered')
    })

})
Run Code Online (Sandbox Code Playgroud)

输出如下:

AssertionError: Form submit not triggered: expected undefined to exist
Run Code Online (Sandbox Code Playgroud)

如果我将操作更改为submit.prevent直接在表单上触发,则一切正常。但是,实际上,对于“通过”按钮提交,实际上没有测试范围。

wrapper.find('form').trigger('submit.prevent')
Run Code Online (Sandbox Code Playgroud)

似乎该trigger函数实际上并未单击该按钮。

为什么会这样,有没有办法解决?

vue.js vue-test-utils

4
推荐指数
1
解决办法
1831
查看次数

在Elixir Guard中为字符串使用is_bitstring或is_binary吗?

让我们来看看这个简单的函数:

  @spec laBionda(String.t()) :: String.t()
  def laBionda(name \\ "you") when is_bitstring(name) do
    "One for #{name}, one for me"
  end
Run Code Online (Sandbox Code Playgroud)

我只想为String输入定义函数。

我应该使用警卫队is_bitstring还是is_binary警卫队?有什么区别吗?在这种情况下,两者似乎都很好。

elixir

2
推荐指数
2
解决办法
577
查看次数