小编Gij*_*rts的帖子

我是vue.js(2)的新手,我目前正在开发一个简单的事件应用程序.我已设法添加事件但现在我想基于单击按钮删除事件.

HTML

    <div class="list-group">

        <div class="list-group-item" v-for="event in events">
            <h4 class="list-group-item-heading">
                {{ event.name }}
            </h4>

            <h5>
                {{ event.date }}
            </h5>

            <p class="list-group-item-text" v-if="event.description">{{ event.description }}</p>

            <button class="btn btn-xs btn-danger" @click="deleteEvent(event)">Delete</button>
        </div>

    </div>
</div>

JS(Vue公司)

new Vue ({
    el: '#app',

    data: {
        events: [
            {
                id: 1,
                name: 'Event 1',
                description: 'Just some lorem ipsum',
                date: '2015-09-10'
            },
            {
                id: 2,
                name: 'Event 2',
                description: 'Just another lorem ipsum',
                date: '2015-10-02'
            }
        ],

        event: { name: '', description: '', date: '' …

我是JavaScript测试的新手，并且在新的代码库中工作。我想编写一个在元素上检查className的测试。我正在与Jest和React-Testing-Library合作。下面我有一个测试，将根据variant道具。它还包含一个className和。我想测试一下。

it('Renders with a className equal to the variant', () => {
    const { container } = render(<Button variant="default" />)
    expect(container.firstChild) // Check for className here
})

我试图在Google上搜索像Enzyme一样具有的属性，hasClass但找不到任何东西。有谁知道如何使用当前库（react-testing-library，Jest）解决此问题？

我是 Typescript 的新手，目前正在尝试将我的 React.js 项目之一迁移到 Typescript。我偶然发现的事情之一是refs。我编写了一个使用 aref作为参数的钩子。基本上，它会检测 div 外部是否有单击，并触发作为第二个参数传递的函数。现在我想知道如何输入该特定的ref. 我尝试过不同的解决方案，例如React.RefObject<any>但不认为使用any是个好主意？我可以用什么来代替？值为undefined或 div（容器组件为样式组件），参见代码：

钩

// How to type `ref`?
export function useOnClickOutside(ref: React.RefObject<any>, handler: Function) {
  useEffect(
    () => {
      const listener = (event: MouseEvent | TouchEvent) => {
        // Do nothing if clicking ref's element or descendent elements
        if (!ref.current || ref.current.contains(event.target)) {
          return
        }

        handler(event)
      }

      // MouseEvent
      document.addEventListener('mousedown', listener)
      // TouchEvent
      document.addEventListener('touchstart', listener)

      return () => { …

由于我使用symfony版本2.7(安装项目后立即出现404页面错误)的问题,我开始使用Symfony 3.0版.在一些小问题之后,我发现"app/console"被"bin/console"取代.所以我现在正在开发一个新项目,我已经构建了一个名为1的实体的新bundle

Codeit/RestaurantBundle && CodeitRestaurantBundle:Reserveren

格式是注释,实体有一个名为"naam"的id和1字段(字符串,255).我更新了模式,我生成了Codeit的实体,在成功完成之后,我生成了一个带有写操作的crud.格式再次是注释,前缀是/ reserveren.

因此,如果我访问页面web/reserveren,我将获得我的实体的显示页面.不幸的是,如果我尝试添加新条目,我收到以下错误:

给出的类型为"string","Codeit\RestaurantBundle\Form\ReserverenType"的预期参数

我的Bundle/Form/ReserverenType.php

<?php

namespace Codeit\RestaurantBundle\Form;

use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver;

class ReserverenType extends AbstractType
{
/**
 * @param FormBuilderInterface $builder
 * @param array $options
 */
public function buildForm(FormBuilderInterface $builder, array $options)
{
    $builder
        ->add('naam')
    ;
}

/**
 * @param OptionsResolver $resolver
 */
public function configureOptions(OptionsResolver $resolver)
{
    $resolver->setDefaults(array(
        'data_class' => 'Codeit\RestaurantBundle\Entity\Reserveren'
    ));
}
}

我的实体代码

<?php

namespace Codeit\RestaurantBundle\Entity;

use Doctrine\ORM\Mapping …

我正在创建一个非常简单,但有点调整,用于显示iFrame的模态.我通过javascript函数和bootstrap提供的模态调用函数打开模型.在我的模态中,我放置了一个用于关闭模态的图标.如果我点击这个关闭图标,模态将不会隐藏.我使用的onclick与一个JavaScript .modal('show')并.modal('hide')通过引导提供的功能.模态不会隐藏,但我的控制台日志被触发.

我知道有很多问题都有类似的问题,但这些问题并没有包含我正在寻找的答案.我知道html中的CSS是不对的,但我正在做一些快速原型设计,所以请原谅我.

码

打开模态链接

<a href="#" onClick="openFeedback('getBootstrap')">Klik hier om de website te bekijken</a>

模态html

<!-- Modal -->
<div class="modal fade" id="iframe_feedback" style="padding-top: 20px;">

  <i class="ion-close-round close-modal" style="position: fixed; right: 40px; font-size: 32px; color: white; top: 40px; cursor: pointer;" onClick="closeModal()"></i>

  <div class="body-modal" style="max-width: 90%; margin: 0 auto; overflow: scroll;">

    <div id="clip" style="overflow:scroll;">
        <iframe src="/dashboard" style=" width:2600px; height: 1600px;"></iframe>
    </div>

  </div>  

</div>

JS

function openFeedback(link) {
    $('#iframe_feedback').modal('show');
    console.log(link);
};

function closeModal() {

    $("#iframe_feedback").modal('hide');
    console.log('Close fired');

};

我的主要问题是我的模态出现了,同时触发了console.log …

不确定这是否是合适的社区，但对我来说值得一试：我正在使用prop-typesnpm 包中的 PropTypes。它非常适合输入 React 应用程序，但对我来说真正烦人的一件事是，当我使用PropTypes. 这对我来说确实有意义，因为调用了包prop-types并且您将其作为默认导入导入，大多数时候名为PropTypes，但我想知道是否有人有一个很好的技巧可以在 vs code 中使用自动导入来实现此功能，或者任何其他方式，这样我就不必手动导入它。

所以..输入时：

DiscoverAppsBanner.propTypes = {
  trackingContext: PropTypes
}

我希望导入会出现在这里：

有人有好主意吗？:)

我第一次和Laravel一起工作.随着5.4版本,他们推出了laraval混合.我试图将我的静态网站的SASS(我用gulp编译)粘贴到资源文件夹中的sass文件中.这很顺利,我的SASS将被编译到公共地图中的app.css文件中.

我有一个主要问题.sass文件(资源/资产/图像)中的所有图像都没有像我希望的那样进行编译.

SASS文件中的代码(资源/资产/ SASS/banners.scss)

section.module.parallax-1 {
  background-image: url('../images/banner1.jpg');
}

用混合编译(app.css)

section.module.parallax-1 {
  background-image: url(/images/banner1.jpg?ef4f135bad144d886f07c8b65f757a85);
}

因此,不是像我在SASS文件中那样将url编译为css,而是将其编译为与最后的哈希不同的东西.此外,在编译sass之后,它会生成一张图像映射,其中包含我在SASS文件中使用的图像.我的图像地图最初位于资源/资产/图像.

我不知道我做错了什么.我试图更改我的sass文件中的URL但这无济于事.有人可以帮助我吗？或者还有其他解决方案吗？

webpack.mix代码/ js

const mix  = require('laravel-mix');

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

我正在创建一个 react 应用程序，create-react-app并且我尝试按照此处的这些步骤来实现 SASS 预处理器。所以一切都很顺利，我已经开发了我的应用程序的某些部分。但是出于一个非常奇怪的原因，我现在在开发 2 天后在编译时出现错误，我无法想象任何原因。

{
  "status": 1,
  "file": "/Users/glenngijsberts/Documents/Development/toggle/src/components/sass/assets.scss",
  "line": 2,
  "column": 9,
  "message": "Undefined variable: \"$primary\".",
  "formatted": "Error: Undefined variable: \"$primary\".\n        on line 2 of src/components/sass/assets.scss\n>> \tcolor: $primary;\n   --------^\n"
}

所以主要问题是我现在得到一个编译错误，因为我assets.scss无法访问变量。资产被导入到我的 App.scss 中，它也导入了 variables.scss。

在我的 App.scss 文件中

//Import SCSS
@import "./sass/vars.scss";

@import "./sass/popup.scss";
@import "./sass/assets.scss";
@import "./sass/utils.scss";
@import "./sass/modal.scss";
@import "./sass/dropdown.scss";
@import "./sass/visualLine.scss";
@import "./sass/dashboard.scss";
@import "./sass/tabs.scss";
@import "./sass/projects.scss";
@import  "./sass/colors.scss";

有效的是：

资产.scss

//Import SCSS
@import "vars.scss";

span.brand {
    color: …

我正在处理 HTML 表单。我已将必需的元素添加到一些输入字段中。因为我使用的是 Bootstrap，所以输入字段在聚焦时默认为蓝色。我已将所需的输入字段设置为红色，并带有input:required:focus {border: 1px solid red;}. 现在，当填写所需的输入字段时，我想将输入字段边框更改为绿色。我的问题是，这可以用 CSS 实现吗？如何实现？如果没有，我如何用 Javascript 或其他东西来实现这一点？

input:required:focus {
  border: 1px solid red;
  outline: none;
}
textarea:required:focus {
  border: 1px solid red;
  outline: none;
}
.form-horizontal {
  padding-left: 15px;
  padding-right: 15px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<form class="form-horizontal">

  <div class="form-group">
    <label class="col-md-2 control-label" for="Name">
      Full name <span class="required">*</span>
    </label>
    <div class="col-md-10">
      <input id="Name" name="Name" placeholder="Full name" class="form-control input-md" required="" type="text">
      <span class="format-block"><a data-toggle="tooltip" data-placement="right" title="John Doe">Format</a></span>
    </div>
  </div>

  <div class="form-group">
    <label class="col-md-2 …

我正在使用Laravel后端API开发Vue应用程序。单击链接后，我想调用服务器以下载特定文件（大多数情况下为PDF文件）。当我get向axios我发送请求时，会在响应的正文中得到一个PDF作为回报。我想直接下载该文件。

让您更好地了解响应的外观：

（注意：我知道真实的文本响应比图像要好，但是由于实际PDF内容的长度，我看不到任何返回方法。）

是否可以使用JavaScript或其他方式下载该文件？它必须是直接下载的特定内容，而无需再次单击该按钮。

码

// This method gets called when clicking on a link
downloadFile(id) {
    const specificationId = this.$route.params.specificationId;

    axios
        .get(`${this.$API_URL}/api/v1/suppliersmanagement/product-specifications/${specificationId}/fileupload/${id}/download`, {
            headers: this.headers,
        })
        .then(response => {
            console.log(response);
            // Direct download the file here..
        })
        .catch(error => console.log(error));
},