小编Joh*_*son的帖子

我对VueJS很新.我必须在ASP.NET MVC5中构建单个页面应用程序.

我按照本教程进行了很好的工作 - > TUTORIAL

但是当我创建一个.vue页面来测试VueJS2路由时,浏览器不理解"导入",我读到我必须使用像Babel这样的转换器,有人知道我是如何解决的吗？

App.VUE

    <template>
    <div id="app">
        {{msg}}
    </div>
</template>

<script>
    export default {
      name: 'app',
      data () {
        return {
          msg: 'Welcome to Your Vue.js App'
        }
      }
    }
</script>

App.JS

    import Vue from 'vue'
import App from './App.vue'


new Vue({
    el: '#app',
    router,
    render: h => h(App),
    data: {
        message: 'Hello Vue! in About Page'
    }
});

_Layout.cshtml

<div class="container-fluid">
        @RenderBody()

        <div id="app">
            { { message } }
        </div>
    </div>


    <script src="~/Scripts/essential/jquery-3.1.1.min.js"></script>
    <script src="~/Scripts/essential/bootstrap.min.js"></script> …

如何在VueJS中使用v-if中的多个条件？

这是我的代码:

JS

let Names = [
{
Name: "Josh"
FullName: ""
},
{
Name: "Jonathan"
FullName: null
},
{
Name: "James"
FullName: "James Johnson"
}];

Index.Vue

<ul>
    <li v-for="item in Names" 
    v-if=" item.FullName != null || item.FullName != '' " >
     {{FullName}}
    </li>
</ul>

这v-if=" item.FullName != null || item.FullName != '' "不起作用,为什么？我怎么能把两个条件放在一个v-if？

谢谢!!

我有一个使用 Router-link 的菜单，我想在 Router-link 激活时将类“Active”放在“li”上。

<ul class="nav nav-second-level">
    <li v-for="item in menu">
        <router-link :to="{ name: somewhere }" tag="a" exact-active-class="IS-ACTIVATED">
            {{Name}}
        </router-link>
    </li>
</ul>

有没有办法使用“exact-active-class”将一个类设置为父类？

谢谢！

如何在对象中使用 Set()？我阅读了文档，它适用于数组中的值，但不适用于对象。为什么？我想避免具有完全相同值的重复项。

let nameList_one = [{ name: 'harry', id: 1 }, { name: 'john', id: 2 }, { 'name': 'trevor', id: 3  }]
let nameList_two = [{ name: 'harry', id: 1  }, { name: 'ron', id: 4  }, { name: 'jackson', id: 5  }]

let fullNameList = [...nameList_one , ...nameList_two ]

let filteredList = [...new Set(fullNameList)] // the output is the merge of two array, duplicating "harry".

输出：

[{ name: 'harry', id: 1 }, { name: 'john', id: 2 }, …

现在显示数据表中的“ 我的Excel按钮”。我正在使用NPM导入所有脚本， 所有其他按钮都可以正常工作（PDF，Copy，Print）。仅Excel不起作用。

检查我的进口：

import 'datatables.net-bs'
import 'datatables.net-buttons-bs'
import 'datatables.net-responsive-bs'
import 'datatables.net-buttons/js/buttons.colVis.js'
import 'datatables.net-buttons/js/buttons.flash.js'
import 'jszip'
import pdfMake from 'pdfmake/build/pdfmake'
import pdfFonts from 'pdfmake/build/vfs_fonts'
import 'datatables.net-buttons/js/buttons.html5.js'
import 'datatables.net-buttons/js/buttons.print.js'

pdfMake.vfs = pdfFonts.pdfMake.vfs

我的配置：

let datatableConfig = {
    responsive: true,
    "dom": '<"html5buttons"B>lTfgtip',
    "buttons": [
        { extend: 'copy' },
        { extend: 'excel'}, 
        { extend: 'excelHtml5' },
        { extend: 'pdf'  },
        { extend: 'print' }
    ]
};

$('#dataTable').DataTable(datatableConfig)

如果我https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.4/jszip.min.js直接在HTML中输入内容，则可以。如何使用不起作用import？（是的，已经安装了jszip）

谢谢！

我使用NVDA程序测试我的网站,并让所有人都可以访问网站.最近我在MDN Web docs上看到了一个允许我使用a而不是使用的属性button.是的role="button".

MDN和Bootstrap 4 Doc说:

这些链接应该被赋予一个角色="按钮",以适当地将其目的传达给屏幕阅读器等辅助技术.

<a class="btn btn-primary" href="#"> Anchor without ROLE </a>
<a class="btn btn-primary" href="#" role="button"> Anchor with ROLE </a>
<button class="btn btn-primary" type="button"> Just a Button </button>

我尝试使用NVDA并按下B(在网站中找到按钮的快捷方式),它找到的唯一按钮是带<button>标签的按钮.什么role="button"是被使用？什么是正确的方法？

参考:Bootstrap V4和MDN文档

我不知道为什么我的“数据表”按钮不起作用。复制和CSV按钮效果很好，但是Excel和PDF无法正常工作。

我已经安装了所有npm模块，并且已经全部导入了

$ from 'jquery'
import 'jszip'
import 'datatables.net'
import 'datatables.net-bs'
import 'datatables.net-responsive'
import 'datatables.net-buttons'

import 'datatables.net-buttons/js/buttons.html5.js'
import 'datatables.net-buttons/js/buttons.colVis.js'
import 'datatables.net-buttons/js/buttons.flash.js' 
import 'datatables.net-buttons/js/buttons.print.js'

这是我的数据表配置：

$('#dataTable').DataTable({
                    responsive: true,
                    "language": datatableBR,
                    "dom": '<"html5buttons"B>lTfgt<"row"<"col-md-6"i><"col-md-6"p>>',
                    "buttons": [
                { extend: 'copy'},
                {extend: 'csv'},
                {extend: 'excel', title: 'ExampleFile'},
                {extend: 'pdf', title: 'ExampleFile'}
            ]
                })

有人知道为什么这两个按钮不起作用吗？

非常感谢！！

@EDIT-解决方案

我认为datatables.net和datatables.net-bs陷入冲突。我现在只使用datatables.net-bs。我也使用--save从NPM安装了“ jszip”。

=）

我正在 VueJS 上测试 Mixins，我有一个问题。有没有办法直接从 Mixins 调用事件而不必在 my 中分配它methods？

MyMixins.js

import Vue from 'vue'

Vue.mixin({
    methods: {
        Alerta(){
            alert('WORK!')
        }
    }
})

应用程序

<template>
   <button v-on:click="AlertaInterno">test</button>
</template>
<script>
   export default{
         methods:{
            AlertaInterno(){
            this.Alerta()
         }
      }
   }
</script>

上面的代码有效。我想知道如何直接调用 mixin 函数，如下所示：

应用程序

<template>
   <button v-on:click="this.Alerta()">test</button>
</template>

谢谢！

如何在一个对象上提供Object.Freeze？

下面是我下面创建,其中例如a,我复制a的b,冻结b,并尝试重新分配一个值a.但它已不再可能.为什么？我如何freeze只对一个对象做？

谢谢!

let a = { "teste" : [1,2,3] }

// I want 'b' freezed
const b = a;
Object.freeze(b);

a.teste = [4,5,6]

console.log(a)

我正在使用VSCode，它有一个很好的功能来匹配字符（不带ctrl+ f）。与下图相同。sublimeText有没有插件可以做同样的事情？

谢谢！

版本

VueJs：2.3.3
Vee验证：2.0.0-rc.25

说明

我有一个自定义组件。这是带有字符计数器的输入，我尝试在此输入中放入vee-validate。我想在提交表单时显示错误。我遵循vee-validate文档中的每个步骤，但是没有用。我的表单提交时忽略了任何输入错误。

重现步骤：

使用vee-validate

代码创建一个自定义组件 ：

Parent.vue

   <vue-input maxlength="20" minlength="3" placeholder="works"
    validate="required|numeric" v-model="dataItem.teste" name="teste"></vue-input>

Component.js

Vue.component('vue-input', {
    props: ['maxlength', 'minlength', 'placeholder', 'validate', 'value', 'name'],
    template: `<div>
              <div class="input-group">
                <input type="text" :name="name" :value="value" 
                @input="$emit('input', $event.target.value); 
                counter = $event.target.value.length" 
                :maxlength="maxlength" :placeholder="placeholder" 
                v-validate="validate" 
                :class="{'is-danger': errors.has(name), 'form-control' : true}">

                Erros: {{errors}}
                <span class="input-group-addon">
                    {{ maxlength - counter }}
                </span>

                <span v-show="errors.has(name)" class="text-danger m-t-xs">
                    {{ errors.first(name) }}
                </span>
             </div>
             </div>`,
             data: () => ({
                 counter: 0
             })
});