标签: vue-component

我需要将 webkitSpeechRecognition 连接到我的 Vue.js 项目（适用于 Chrome）。

我正在尝试将代码插入到组件中

<template>
      <div class="voice">
        <h1>{{ msg }}</h1>
        <button v-on:click="greet">Speak</button>
      </template>

      <script>
      export default {
        name: 'voice',
        data () {
          return {
            msg: 'Speak',
          }
        },
        methods: {
          greet: function (event) {

          }
        }
      }
      </script>

这段代码

var recognition = new (SpeechRecognition || webkitSpeechRecognition || mozSpeechRecognition || msSpeechRecognition)();
recognition.lang = 'en-US';
recognition.interimResults = false;
recognition.maxAlternatives = 5;
recognition.start();

recognition.onresult = function(event) {
    console.log('You said: ', event.results[0][0].transcript);
};

但我有错误“未定义 webkitSpeechRecognition”

我熟悉通过总线在事件上发送数据,这些工作很好,但现在我想要发出一些东西,但我没有事件可以将它绑定.

我试图在挂载时发出它但是没有如下工作:

mounted(){
  bus.$emit('send-test', this.test);
},

当我在这样的方法上花点时间时：

<template> 
    ...
</template>
<script>
    export default{
        ...
        methods:{
            ...
            add(event){
                let current = moment()                  
            }
        }
    }
</script>

然后调用add方法，它可以正常工作。

但是，如果我像这样在坐骑上放一些力矩：

mounted(){
   let currentAt = moment()   
}

这是行不通的。它返回以下错误：

[Vue警告]：安装的挂钩中出现错误：“ ReferenceError：未定义力矩”

我该如何解决？

版本

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
             })
});

我在Vue 2中有一个组件：

import Vue from 'vue';
import Component from 'vue-class-component';
import Prop from 'vue-property-decorator';

@Component({
  template: require('./template.html'),
})

export class SuklTableApprComponent extends Vue {

  @Prop() 
  type: any;

  @Prop()
  data: any;

  mounted() {}

}

我正在按照文档中的说明进行操作，但是打字稿不会让我使用该@Prop装饰器。它抛出一个错误：

TS2349：无法调用类型缺少调用签名的表达式。类型'typeof“ / home / tomasturan / programming / sukl / reg-dis-forms-v2 / node_modules / vue-property-decorator / li ...'没有兼容的呼叫签名。

这是为什么？我有一个类似的项目，其中似乎所有配置都相同，并且可以正常工作。为什么会引发此错误？

我面临着vue.js eventBus非常重要和奇怪的问题.

我的代码是这样的,

mounted: function() {
    eventBus.$on('load-item', () => {
        // some loading data ajax 
    })
}

所以,如果我第一次进入这个组件,它将只执行一次.但是如果我切换到其他组件然后又回到这个组件,事件会发出一次,但是监听器正在执行这个功能2次.因此每次访问此组件时,它都会越来越多地加载数据.第三次3 Ajax请求.第4次4 ajax等.

我试过以下解决方案,

beforeDestroy: function () {
    eventBus.$off('load-item');
}

所以上面的代码将删除监听器,它是否只在它破坏组件时才起作用.但就我而言,如果另一个视图使用相同的组件,则会出现相同的问题.

我的问题是,当我们更改页面时,完全删除事件监听器的最佳方法是什么？

在vue.js有什么东西吗？

如果您不清楚,我可以详细解释.

我正在使用 VueJS 的VuetifyJs，并且试图以表格格式显示对象数组中的复选框。 所需的输出如下所示：

选中“所有用户”时，应选中所有复选框。

我创建了一个行布局，并将该行分为两个弹性框，因此我具有两列的行结构。我循环使用“ v-for”，并为每一行显示当前索引和下一个索引的值。但是，下一次迭代循环时，将重复最后一个条目。我可以到达的最接近的位置如下所示：

CodePen网址： https ：//codepen.io/dhnsh/pen/ZRMgoE

我也尝试使用表格代替布局和弹性，但无法做到。在codepen中，我使用函数“ checkLength”来获取下一个索引，因为使用预增量运算符来递增“ index”会产生错误（可能是由于数组超出范围）。

1）我们如何在Vuetify中显示所需的输出？

2）是否有像我们在Javascript中那样以“ 2”为增量迭代“ v-for”？例如：

    for(var i=0;i<array.length();i += 2)

我有一个方法可以进行异步调用。

methods: {

        getPercentCovered() {
          this.getPercentageCompletedBySubject(1).then((percent) => {
          return percent;
        });
},

它从ajax请求返回的值计算百分比。

我想的问题是延迟

<progress-bar :percent="getPercentCovered()"></progress-bar>

在呈现道具之前，永远不会传递该值。有没有解决的办法？

以前，我已经在其他项目中使用的Vanilla JS中做了一些拖放功能。现在，我开始了一个Vue.js项目，我想使用相同的拖放功能。

是否可以在Vue.js组件中包含普通JS文件？怎么做呢？

到目前为止，我只尝试<script>在index.html的head元素中添加标签，但会引发错误。

<script src="../src/js/drag-and-drop.js"></script>

我正在尝试使用Vuu.js将值从父组件传递到子组件。我提供了一个很好的例子。但是当我更改名称时，它将停止工作。我不知道我在做什么错。我对道具的了解有限，但我仍在努力使自己步入正轨。

工作示例：

https://codepen.io/sdras/pen/788a6a21e95589098af070c321214b78

的HTML

<div id="app">
  <child :text="message"></child>
</div>

JS

Vue.component('child', {
  props: ['text'],
  template: `<div>{{ text }}</div>`
});

new Vue({
  el: "#app",
  data() {
    return {
      message: 'hello mr. magoo'
    }
  }
});

非工作示例：

的HTML

<div id="app">
  <child :myVarName="message"></child>
</div>

JS

Vue.component('child', {
  props: ['myVarName'],
  template: `<div>{{ myVarName }}</div>`
});

new Vue({
  el: "#app",
  data() {
    return {
      message: 'hello mr. magoo'
    }
  }
});