小编Gus*_*lli的帖子

Vue js在输入字段中对v模型应用过滤器

希望可以有人帮帮我!我已经制定了一个包含Jasny Bootstrap插件的指令,更具体地说是输入掩码的东西,一切顺利!

现在我已经制作了一个自定义过滤器,以便格式化日期字段!

我从我的后端应用程序收到的日期格式是YYY-MM-DD,我必须在视图上显示为DD/MM/YYYY ...我已经尝试v-model="date | myDate"但它无法正常工作!

JS

Vue.directive('input-mask', {
  params: ['mask'],

  bind: function() {
    $(this.el).inputmask({
      mask: this.params.mask
    });

  },
});

Vue.filter('my-date', function(value, formatString) {

  if (value != undefined)
    return '';

  if (formatString != undefined)
    return moment(value).format(formatString);

  return moment(value).format('DD/MM/YYYY');

});

var vm = new Vue({
  el: 'body',
  data: {
    date: '2015-06-26',
  }
});
Run Code Online (Sandbox Code Playgroud)

HTML

<label>Date</label>
<input type="text" class="form-control" v-input-mask mask="99/99/9999" v-model="date">
<p>{{ date | myDate 'dd/mm/yyyy' }}</p>
Run Code Online (Sandbox Code Playgroud)

如果有人有兴趣,有JSBin!

提前致谢!

编辑:更好地解释我的期望=)

当页面首次加载输入时收到2015-06-26的值,我想将该值显示为DD/MM/YYYY所以26/06/2015!只有在我开始输入内容后它才能正常工作!

javascript jquery date momentjs vue.js

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

使用vue路由器控制模态

我正在使用Vue 2和VueRouter开发的项目,我正在尝试使用我的VueRouter控制的模态!

我已经完成了以下代码

主要vue组件:我的普通组件将被加载到默认的路由器视图中,我的所有模态将被加载到模态路由器视图中

<div id="app">
  <router-view v-if="!isLoading"></router-view>
  <router-view v-if="!isLoading" name="modal"></router-view>
</div>
Run Code Online (Sandbox Code Playgroud)

RoutedModals混音正如您在我的beforeRouteEnter方法中看到的那样,我正在检查是否存在之前的"from"路线(这意味着用户在应用程序内部导航页面)...如果是,我将其设置为默认组件...如果不是(这意味着用户直接从URL获得)我将我的仪表板设置为默认值,它将在我的模态后面打开.

import Dashboard from 'modules/dashboard/components/Main.vue'
import { isNil } from 'lodash'

export default {
  data() {
      return {
        canAccessDirect: true,
        goBackTo: '/'
      }
    },
    beforeRouteEnter(to, from, next) {
      to.matched[0].components.default = isNil(from.matched[0]) ? Dashboard : from.matched[0].components.default

      next(vm => {
        if (!vm.canAccessDirect)
          vm.$router.push({
            name: 'dashboard.index'
          })

        vm.fetchRecords()
        vm.goBackTo = from.path
        window.jQuery(vm.$el).modal('show')
        window.jQuery(vm.$el).on('hide.bs.modal', () => {
          vm.$router.push(vm.goBackTo)
        })
      })
    },
    beforeRouteLeave(to, from, next) {
      setTimeout(() => {
        next()
      }, …
Run Code Online (Sandbox Code Playgroud)

javascript modal-dialog vue-router vuejs2

10
推荐指数
1
解决办法
2224
查看次数

TinyMCE 和 Vuejs 作为组件

我正在尝试为 TinyMCE 制作一个 Vue 组件,但我面临一些我无法解决的问题!有谁能够帮助我?或者也许建议更好的步行方式

有我的组件

import Vue from 'vue'
import _ from 'lodash'

export
default {

  props: {
    model: {
      default () {
        return null
      }
    },
    showLeadInfo: {
      default () {
        return false
      }
    }
  },

  data() {
    return {
      id: 'editor_' + _.random(10000, 99999)
    }
  },

  watch: {
    model() {
      if (this.model == null)
        tinyMCE.activeEditor.setContent('');
    }
  },

  ready() {
    var vm = this;
    tinyMCE.baseURL = "/vendor/tinymce/";
    tinymce.init({
      selector: "#" + vm.id,
      theme: "modern",
      height: 200, …
Run Code Online (Sandbox Code Playgroud)

javascript tinymce vue.js vue-component

6
推荐指数
1
解决办法
8442
查看次数

Vueify上的Vuejs递归组件

基于Vuejs文档示例,我试图做一个简单的树视图组件,我可以在没有任何交互的情况下显示一个帐户图表(没有添加没有拖放...非常简单).

我在FiddleJs上做了一个例子,但是我的例子很好用......我不知道为什么在我的应用程序上我无法使它工作!我不知道是否有一些Vueify问题......可能你可以帮助我!

有我的代码:

OzChartTree.vue

<template>

    <ul v-if="model.length">
        <li v-for="m in model" :class="{ 'is-group': m.children }">
            {{ m.name }}
            <ul v-if="m.accounts">
                <li v-for="a in m.accounts">
                    {{ a.name }}
                </li>
            </ul>
            <oz-tree :model="m"></oz-tree>
        </li>
    </ul>

</template>

<script type="text/babel">

    import OzChartTree from './OzChartTree.vue'

    export default {

        components: {
            OzTree: OzChartTree
        },

        props: {
            model: Array,
        }

    }

</script>
Run Code Online (Sandbox Code Playgroud)

我第一次调用树视图组件

<oz-chart-tree :model="chart"></oz-chart-tree>
Run Code Online (Sandbox Code Playgroud)

问题是当我在ja .vue文件上递归调用组件时.

如上所述我得到以下错误:

app.js:23536 [Vue警告]:未知的自定义元素: - 您是否正确注册了组件?对于递归组件,请确保提供"名称"选项.

但是是否正确注册为OzTree!我无法理解!

有人有什么想法吗?

javascript vue.js vue-component vueify

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

如何获得ENV型Laravel + VueJS + Homestead

我正在使用Laravel + VueJS + Homestead开发一个应用程序,并且每个人都知道在Laravel 5.2上我们有一个env文件,我们可以在其中设置env变量...我想做类似的事情,但我可以从我的访问它javascript代码!

我已经读过有关proccess.NODE_ENV的内容,但我不知道我是否做得对,但它看起来只适用于npm开始没有?当我通过家园运行我的应用程序时,我真的不知道该怎么做!

提前致谢!

javascript env vue.js homestead laravel-5.2

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

将标头添加到Laravel 5.4通知系统发送的电子邮件中

有人知道如何将标题添加到通过Laravel Notification System发送的电子邮件中吗?

我不是在谈论Mailable类,我可以通过该withSwiftMessage()方法设置标题!

我也想使用,以保持MailMessage一次我有很多内置的电子邮件的使用line,greetings方法!

任何人都有任何线索?

有我的代码以防有人需要看到任何东西!

<?php

namespace PumpMyLead\Notifications\Tenants\Auth;

use Illuminate\Bus\Queueable;
use Illuminate\Notifications\Notification;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Notifications\Messages\MailMessage;

class AccountActivation extends Notification
{
    use Queueable;

    /**
     * Create a new notification instance.
     *
     * @return void
     */
    public function __construct()
    {
        //
    }

    /**
     * Get the notification's delivery channels.
     *
     * @param  mixed  $notifiable
     * @return array
     */
    public function via($notifiable)
    {
        return ['mail'];
    }

    /**
     * …
Run Code Online (Sandbox Code Playgroud)

php email notifications swiftmailer laravel-5

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

如何改进 ui Sentry.io 面包屑?

我想知道是否有关于如何编写 HTML 代码以便在问题中获得更好的 Sentry.io 面包屑的良好实践。

无法识别用户交互的元素,我认为使用 CSS 类或 ID 并不理想 - 尽管我们可以自定义面包屑,但看起来将文本放入标签中并不是一个好习惯在 Sentry Github 存储库中发现的一些问题。

我在想aria-label,有没有人有什么建议?

现在很难理解用户在阅读面包屑时的步骤。

在此处输入图片说明

html bug-tracking sentry

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

使用 FormData Javascript 发送布尔值 - Vuejs + Laravel 应用程序

我正在尝试通过 Axios 库提交 FormData javascript 对象,但无法使其工作,因为有一个布尔字段(is_active)必须以布尔值的形式访问我的 api,而 FormData 对象正在将其转换为字符串!

我尝试在没有 FormData 的情况下实现它,然后它就完美了!

有人知道让它发挥作用的最佳方法吗?实际上,我在 Laravel 请求修复该字段方面做得非常糟糕......我不认为这是最好的主意,但它现在有效!

有人有好的解决方案吗?

这是我当前的工作代码,但我想让它变得更好!

我的控制器和我的要求:

PS:我已经在 $rules 函数上做了 IF 来修复布尔问题...如果我把它作为字符串,我的数据库就会出现问题,其中字段必须是布尔值,我还必须删除我的布尔验证那个领域

class PostRequest extends FormRequest
{
    public function rules()
    {
        if (in_array($this->get('active'), ['true', 'false'])) {
            $this->offsetSet('active', $this->get('active') == 'true');
        }

        $rules = [
            'title'             => 'required|string',
            'slug'              => 'required|alpha_dash|unique:posts,slug',
            'photo'             => 'required|image',
            'publish_date'      => 'required|date_format:d/m/Y',
            'summary'           => 'required',
            'content'           => 'required',
            'author_id'         => 'required|exists:authors,id',
            'category_id'       => 'required|exists:categories,id,flag,posts',
//            'active'            => 'boolean',
        ];

        return $rules;
    }
}

class PostsController …
Run Code Online (Sandbox Code Playgroud)

javascript php form-data laravel laravel-5.3

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

如何在Bootstrap模式下使用Vue.js渲染插件jQuery(作为工具提示和Switchery)?

你好吗?我希望好!

所以我在ThemeForest上有一个模板(纯HTML + CSS + jQuery),我在Vue.js + Laravel中开发app.

当我必须在Bootstrap模式中使2个插件工作(一个是Bootstrap Tooltip和其他Switchery)时,我遇到了一个问题.

我想保持原样,因为我不喜欢更改模板=)

当我把它放在View组件中时,它根本不起作用!有我的代码,如果有人可以提供帮助!

OBS:我使上面的代码比真正的代码更清洁,我正在使用VUEIFY,我认为这不是问题!

按钮触发了模式

<a href="#" data-toggle="modal" data-target="#sources-modal">My Modal</a>
Run Code Online (Sandbox Code Playgroud)

我的模态代码

<template>

  <!-- Source -->
  <div id="sources-modal" class="modal fade" style="display: none;">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Sources</h4>
        </div>
        <div class="modal-body">
          <div class="row p-10">
            <div class="col-md-6 m_md_bottom_15">
              <span class="waves-effect btn btn-warning" data-toggle="tooltip" data-original-title="Refresh" @click="fetchRecordList()"><i class="fa fa-refresh"></i></span>
            </div>
          </div>
          <div class="over_auto" v-el:data-grid>
            <table class="table table-striped table-bordered m-0">
              <thead>
                <tr>
                  <th class="w_50">
                    <input @click="selectAll()" v-model="allSelected" type="checkbox">
                  </th>
                  <th class="th_sort" …
Run Code Online (Sandbox Code Playgroud)

javascript jquery tooltip vue.js switchery

0
推荐指数
1
解决办法
1102
查看次数