小编Gij*_*rts的帖子

我正在处理 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));
},

最近我开始使用Symfony2.不幸的是,php app/console命令在我的MAMP服务器上都不能用作Vagrant服务器(MAC OSX).我尝试使用以下命令创建一个包

php app/console generate:bundle --namespace=Vendor/NameBundle

并试图解决问题

php app/console assets:install web

并且这两个命令在我的终端中返回以下内容:

无法打开输入文件:app/console

有人知道如何解决这个问题吗？我正在我的项目目录中工作,如:mac/applications/mamp/htdocs/project但它仍然无法正常工作.我还试图重新安装一个新的symfony项目,但这不是一个修复.我猜我的php在我的终端上根本不工作......

我正在使用Vue.JS(与所有人一样)处理任务列表,我设法添加任务,显示任务甚至删除任务.之后我正在检查任务并给他们一个成功的课程.

所以我想,如果我有一个像class设置为false 的数据,并使用这行代码:

<div v-for="(task, index) in tasks" class="panel panel-default" :class="{panel-success: task.class}" :key="task">

我可以使用click事件设置classto true并给出特定的类panel-success(来自bootstrap).

当我这样做时,我遇到了以下问题:

避免使用JavaScript关键字作为属性名称:表达式中的"class":class ="{panel-success:task.class}"

问题是,kebab案例的语法panel-success.当我更改名称时,to panelsuccess它正在工作.为什么烤肉串不起作用？

我正在使用PHP框架Laravel构建一个应用程序.我正在使用Bootstrap 4预设并安装了一个新项目.一切正常,css,甚至是从导航栏获得的下拉菜单.但由于某些原因,当我尝试通过执行此操作初始化工具提示时,我在控制台中得到Typerror .还尝试通过工具提示类初始化工具提示,但这似乎也不起作用.我遇到了与popover组件相同的问题.

未捕获的TypeError:$(...).tooltip不是函数

未捕获的TypeError:$(...).popover不是函数

除了删除从Laravel安装中获得的注释之外,我在JS中没有任何更改.

bootstrap.js

window._ = require('lodash');

//Popper for Jquery/Bootstrap
window.Popper = require('popper.js/dist/umd/popper');

//Jquery for Bootstrap
try {
    window.$ = window.jQuery = require('jquery/dist/jquery.slim');

    require('bootstrap');
} catch (e) {}

//Axios for AJAX Calls
window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}

app.js

//Bootstrap application with dependencies
require('./bootstrap');

//Import Vue
window.Vue = require('vue');

//Vue components
Vue.component('example-component', require('./components/ExampleComponent.vue'));

//Vue …

我是 React 新手，我尝试构建一个计时器组件。现在我已经开始工作了，但我还想通过 onclick 处理程序停止计时器。问题是启动函数使用了一个间隔，但我不知道如何从另一个函数停止该间隔。

我的JS代码

  constructor() {
    super();

    this.state = {
      times: [],
      timer: false,
      currentTimer: 0
    }

    this.startTimer = this.startTimer.bind(this);
    this.stopTimer = this.stopTimer.bind(this);

  }

  startTimer() {

    const start = Date.now();

    this.setState({ timer: true });

    var timer = setInterval(() => {

      let time = new Date() - start;

      this.setState({ currentTimer: Math.round(time / 1000)});


    }, 1000);

  }

  stopTimer() {

    this.setState({ timer: false });
    console.log('stopped');

    //Clear interval here

  }

我知道该timer变量是该间隔的标识符，但我如何访问它然后停止它？我几乎尝试了所有方法，但似乎都不起作用，我只是不知道如何解决这个问题。

我对 React 比较陌生，我正在用它构建一个新的应用程序。我现在的主要问题是我有一个具有某些属性的状态。基于onchange属性，我更改了状态属性。之后，当我提交表单时，我尝试将一个对象分配给状态中的一个特定属性，我将从find数组上的方法接收该属性。

所以我有一个状态。我复制这个。之后，我执行该find方法并将我从它获得的对象存储在一个变量中。然后我将该对象分配给我所在州的特定属性（冰淇淋）。最后，我用我的新状态 (NewState) 设置了状态。

主要问题是在提交表单后，我分配给对象的属性（冰淇淋）返回空值。真的很奇怪，因为如果我console.log只使用 newState 变量的变量，它会返回一个对象而不是 null。当我console.log声明它返回null时，表单也将使用null属性提交。我的 React 开发工具说该属性 (icecream) 实际上已填充并且不为空。

我的代码

constructor(props) {
    super(props);

    this.state = {
        Order: {
            quantity: null,
            name: '',
            email: '',
            icecream_id: 1,
            icecream: null
        }
    }

    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleInput = this.handleInput.bind(this);
    this.getIcecream = this.getIcecream.bind(this);

}

handleInput(key, e) {
    //Get a copy of the current state
    var state = Object.assign({}, this.state.Order);

    //apply for each key the new value
    state[key] = e.target.value; …

我是Vuejs的新手。我正在尝试为函数设置间隔。不幸的是，它不起作用。我从中得到以下错误：

Uncaught TypeError：无法读取未定义的属性“ unshift”

只是一个常规的警报框起作用。因此，我猜想该变量无法访问。如何访问变量message？我在下面添加了一个jsfiddle。

JS

new Vue({

    el: '#app',

    data: {


        message: {message: '', name: '', fblike: 0, share: 0, retweets: 0, likes: 0, image: '', adress: '', platform: 'tw'},

        messages: [

            {message: 'Lorem ipsum', name: 'John Doe', fblike: 0, share: 0, retweets: 1, likes: 0, image: '', adress: '', platform: 'tw'},
            {message: 'Lorem ipsum', name: 'John Doe', fblike: 0, share: 0, retweets: 1, likes: 0, image: '', adress: '', platform: 'fb'},


        ],

        headerShow: false,
        programShow: false, …

我正在开发一个小型的VueJS webapp.我想从我的数组输出数据到视图,但它必须是数组的最后一项,而最后一项是第二项是一个,在我的例子中等于39.我不知道我怎么能收到那一个.

HTML

<p>The last number in the array (a) is {{userLastCount}} </p>

使用Javascript/Vue公司

data () {
    return {

        event: 'Custom event',
        userLastCount: 0,


        lineData: [
            { time: '2017-05-01 15:00', a: 0 },
            { time: '2017-05-01 16:00', a: 12 },
            { time: '2017-05-01 17:00', a: 23 },
            { time: '2017-05-01 18:00', a: 28 },
            { time: '2017-05-01 19:00', a: 39 },
        ]

    }
},

components: {
    DonutChart, BarChart, LineChart, AreaChart
},

created() {
    this.userLastCount = //equal to 39
}

我想输出lineData对象的'a'的最后一个值,并将其分配给我可以输出到视图的数据字符串.所以,现在最后的'a'= …

我正在开发一个小应用程序,我有一个包含对象的数组,在对象2属性中,一个叫做'label',一个叫'value'.我想要的是将属性'value'的所有值相加,这样我就有一个总值.

Vue公司/ JS

data() {

totalRequest: 0,

   donutData: [
        { label: 'Openstaande verzoeken', value: 20 },
        { label: 'Geaccepteerde verzoeken', value: 25 },
        { label: 'Afgewezen verzoeken', value: 10 }
    ],

},

created() {
        this.totalRequest = //here goes the function to add up all value's of the property 'value' (total value should be 55)
}

HTML

total value {{ totalRequest }}

所以在这个例子中我有3个对象,总值为55(所有3个属性'value').我怎样才能做到这一点？提前致谢.

回答dashton,转载为vue

created() {
        this.totalRequest = this.donutData.reduce((acc, item) => acc + item.value, 0);
}

我正在构建一个简单的博客,但我想使用CKeditor作为博客消息,以便用户可以对博客消息进行一些设计.我之前从未使用过CKeditor,而且我对Laravel也有点新意.所以我设法将我的textarea转换为CKeditor字段,并且我还构建了一个存储博客帖子的函数.这不是问题,我在我的数据库和我的博客概述页面上看到了数据.

但是,CKeditor/Laravel显然会将CKeditor生成的标签存储在数据库中,并将它们显示为文本.如何像代码一样显示文本？

博客消息现在:

CKEDITOR

我的代码

形成

       <div class="row">
                    <div class="col-sm-12">
                        <div class="form-group">
                            <label for="bericht">Nieuwsbericht <span class="required">*</span></label>
                            <textarea class="form-control" id="bericht" name="bericht" required></textarea>
                        </div>
                    </div>
                </div>

                <script type="text/javascript">
                    CKEDITOR.replace( 'bericht' );
                </script>

显示博客文章

<div class="blog-post">
                        <div class="row">
                            <div class="col-md-12">
                                <h1>{{ $blog->name }}</h1>
                            </div>

                            <div class="col-md-12">
                                <h3>{{ $blog->subtitel }}</h3>
                            </div>

                            <div class="col-md-12">
                                <p class="date">{{ $blog->created_at->formatLocalized('%A %d %B %Y') }}, Door {{$blog->user->name}}</p>
                            </div>

                            <div class="col-md-12">
                                <p class="blog-message">

                                    {{ $blog->bericht }}

                                </p>
                            </div>
                        </div>

                    </div>

我正在开发一个组件，我想在其中显示基于数据属性的徽章。为了向组件提供数据，我使用了一个道具。这个道具被调用status，如果存在，它将是0or 1。

现在我想检查该值是否存在，如果是，我想在组件中呈现一些 html。做这个的最好方式是什么？如果未提供数据/值，我不想呈现 html。

HTML

<span>
    <div class="circle-small" :class="{ 'validated': tab.status }"></div>
</span>

因此，仅当提供了道具“状态”的数据时，我才想呈现此 html。我试过使用，v-if="tab.status"但通过这样做，当值为statusis时将不会呈现 html 0。

required像这样使用道具上的属性

status: {
    Type: Boolean,
    required: true,
},

也不会工作，因为实际上不需要使用这个道具。

支柱

status: {
    Type: Boolean,
},

有人有好的解决方案吗？